1

我试图让每个跨度以 3 秒的间隔在随机颜色之间旋转。

JSFiddle：http: //jsfiddle.net/WERFJ/21/

<h1><span class="first">TEXT1</span> <span class="second">TEXT2</span> <span class="third">TEXT3</span></h1>

目前我正在使用下面的代码和jquery.animate-colors插件。有什么方法可以使这个运行或更快地获得相同的效果。Chrome 可以处理，但 FF 经常崩溃。谢谢！

$(document).ready(function() {  
        spectrum();  

            function spectrum(){  
                var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
                var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')';  
                var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')';  

                $('.first').animate( { color: hue1 }, 3000);
                $('.second').animate( { color: hue2 }, 3000);
                $('.third').animate( { color: hue3 }, 3000); 
                spectrum();  
        }  
    });
4

3 回答 3

1

我认为您的问题是递归调用没有等待动画完成。通过将调用作为回调添加到最后一个动画调用，您将仅在最后一个调用完成时调用它，而不是排队和无限的动画链。http://jsfiddle.net/WERFJ/23/现在似乎在 Firefox 中工作正常

$(document).ready(function() {
    spectrum();

    function spectrum() {
        var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')';
        var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')';

        $('.first').animate({
            color: hue1
        }, 3000);
        $('.second').animate({
            color: hue2
        }, 3000);
        $('.third').animate({
            color: hue3
        }, 3000, spectrum);
    }
});​
于 2012-06-21T02:16:20.240 回答
0

从用户的角度来看，最初的延迟是因为浏览器在您的函数完成运行之前不会更新显示，但是您的函数只是不断递归调用自身，直到堆栈溢出 - 或者，在 FF 中，我得到了“太多递归“ 错误。只有在“递归过多”错误使函数崩溃后，所有排队的动画才真正开始工作。

您可以通过更改函数的最后一行以setTimeout()用于排队另一个呼叫而不是让它直接调用自己来避免这种情况：

setTimeout(spectrum,3100);

http://jsfiddle.net/WERFJ/24/

于 2012-06-21T02:20:16.030 回答
0

用于$.when包装动画，并then()运行下一个系列。jQuery 延迟对象然后确保所有动画在重新开始之前完成

演示：http: //jsfiddle.net/WERFJ/26/

var anim_1 = $('.first').animate({ color: hue1}, 3000);
var anim_2 = $('.second').animate({color: hue2}, 3000);
var anim_3 = $('.third').animate({color: hue3}, 3000);

$.when(anim_1, anim_2, anim_3).then(spectrum);
于 2012-06-21T02:29:40.700 回答