javascript - blast.js 动画与 jquery ui 彩色动画

Question

我正在使用 blast.js 来制作两个单词的动画，并使用 jquery ui 来制作颜色动画。我尝试过的一切都没有奏效。

DEMO

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 内部以及 .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