0

我正在使用下面的脚本为特定类中的文本字母随机着色。我想扩展它，使着色每 10 秒动画一次。然后的想法是动画将使用相同的 generateColors 函数，该函数用于在页面加载时为文本着色，从一组颜色动画到另一组颜色。

我已经为动画添加了包含在**中的代码，但它不起作用。我还包含了jQuery 颜色动画插件，但我意识到，通过下面我尝试使用的代码，我实际上并不是在为颜色设置动画，而是在尝试为 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);
});
4

2 回答 2

1

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

setTimeout(generateColors($('.color').text()), 10000);
于 2012-05-04T14:03:56.383 回答
0

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

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

}, 4000);

});

工作一种享受！

于 2012-05-04T21:28:41.807 回答