Question

我使用下面的脚本随机地为特定类中的文本字母着色。我想扩展它，以便每10秒对着色进行动画处理。接下来的想法是动画将使用相同的generateColors函数，该函数用于在页面加载时为文本着色，从一组颜色动画到另一组颜色。

我已经为动画添加了**中包含的代码，但它无效。我还包括了jQuery color animation plugin，但我意识到使用下面我尝试使用的代码我实际上并不是动画颜色，而是尝试动画HTML，这可能是不可能的。但是，我不知道如何使用颜色插件为颜色设置动画，并且会对任何帮助感到高兴。

谢谢，

尼克

$(document).ready(function() {

        $('.colour').each(function() {
        var text = $(this).text().split(''),
        normal = generateColors(text),
        **animate = generateColors(text);**

     $(this).html(normal);

     **$(this).animate( 
      function(event) { $(this).html(animate) });**

     });
});

function generateColors(characters) {
    var result = "";
    var i = 0;
    for(i=0; i < characters.length; i++) {
        result += "<span style='color:"+getColor()+"'>"+characters[i]+"</span>";
    }

   return result;
}        

function getColor() {
    var colList = ['#942525', '#9E2921','#A4392A', '#8C381E', '#8E4224', '#7C3E21','#B64B26', '#B75D29', '#7F5B24','#665824','#89782E', '#49411F', '#4E512A', '#5E7D37', '#567D38', '#278C8C', '#387872','#1D6362','#257377', '#257377', '#8D3594'];

    var i = Math.floor((Math.random()*colList.length));
  return colList[i];
}

setInterval函数

setInterval(function(){

$(".colour").each(function colourChange() {
      var text = $(this).text().split('');
      var normal = generateColors(text);
      $(this).html(normal);
  });
}, 3000);
});

Answer 1

也许您可以使用setTimeout()，如下所示：

setTimeout(generateColors($('.color').text()), 10000);

Answer 2

好的，我最终想到了这一点。感谢sp00m让我在setTimeout上走上正轨。我添加了以下setInterval函数，该函数使用我已经使用的getColor函数动画更改.colour div中的跨度颜色（使用颜色动画插件）：

setInterval(function(){
    $(".colour span").each(function () {
        var colourChange=getColor();
        $(this).animate ({
        color: colourChange,
        },2000);     
    });

}, 4000);

});

有效！

动画jQuery脚本以着色文本

2 个答案: