Question

我正在使用blast.js来动画两个单词，并且jquery ui能够为颜色设置动画。我尝试过的所有东西都没用。

CSS与DEMO无关，因为颜色按钮没有css规则。

var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);

$('.color_button').on('click', function(){
    var words = $('color_body').blast({
        delimiter: 'word',
        generateValueClass: true
    });
    words.each(function(){
    $(this).animate({
    color: newColor
    }, 500);
});
});

目标是让每个单词的颜色变为随机颜色。

Answer 1

确保将此jQuery颜色插件添加到您的项目中，因为它似乎缺少DOM：https://github.com/jquery/jquery-color/blob/master/jquery.color.js（我必须使用<script>将整个脚本复制并粘贴到JSbin中标记）。

然后将代码更改为如下所示。 newColor必须在onClick的onClick内部以及.each（）函数内部生成，该函数循环遍历各个单词。然后，“颜色文本”按钮将随机更改每个单词的文本颜色。

版本1：

$('.color_button').on('click', function(){
    var words = $('.color_body').blast({
        delimiter: 'word',
        generateValueClass: true
    });
    words.each(function(idx, obj){
      var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
      $(obj).animate({
        "color": newColor
      }, 500);
    });
});

第2版（见评论）：

setInterval(function() {
    var words = $('.color_body').blast({
        delimiter: 'word',
        generateValueClass: true
    });
    words.each(function(idx, obj){
      var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
      $(obj).animate({
        "color": newColor
      });
    });
},500);

版本3（参见注释 - 这里是auto-timer的示例jsfiddle）：

var timer = null;
(function setColor() {
    var words = $('.color_body').blast({
        delimiter: 'word',
        generateValueClass: true
    });
    words.each(function(idx, obj){
      var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
      $(obj).animate({
        "color": newColor
      });
      if (!timer) {
          timer = setInterval(setColor,2000); // Loops continuously.
      }
    });
})(); // This function will Auto-Run 1x

用jquery ui彩色动画制作blast.js动画

1 个答案: