javascript - 是什么破坏了 jQuery 动画的这个功能？

Question

我正在尝试在 div 网格中循环显示随机的橙色色调。这是没有损坏功能的页面版本:http://citrix.pewf.co/index_2.html

    /*Randomized image-box colors, shades of orange, looping*/
        var red,green,blue;
            function colorLoop() {
                $(".img").each(function() {
                    red = parseInt((Math.random() * 50)+190);
                    green = parseInt((Math.random() * 25)+85);
                    blue = parseInt((Math.random() * 10));
                    $(this).animate({"backgroundColor":"rgba("+red+","+green+","+blue+",1)"},1000,function() {
                        colorLoop();
                    });
                });
            }

我将此函数基于这两个线程:

jQuery animate loop

How to make a jquery infinite animation?

这个函数不仅不起作用，而且破坏了我文档中的所有其他动画脚本。 (如果我注释掉 colorLoop 函数，这些脚本都可以工作)

我最初在这里调用该函数:

            $(document).ready(function() {
            $(".img").each(function() {
                /*Randomized image-box load times*/
                var loadTime = ((Math.random() * 1250) + 250);
                $(this).hide().fadeIn(loadTime, function() { colorLoop() });
                });
            });

任何使这个工作正常进行的帮助将不胜感激，因为我完全不知道我做错了什么。 =_=

<小时/>

解决了!感谢YuryTarabanko和 SparK ! :)

<小时/>

<强> See it in action!

最终代码:

        <script src="jquery.color-2.1.0.js" type="text/javascript"></script>
        <script>
    /*Randomized image-box colors, shades of orange, looping*/
        var red,green,blue;
            function colorLoop() {
                setTimeout(function() { 
                    $(".img").each(function() {
                        red = parseInt((Math.random() * 75)+180);
                        green = parseInt((Math.random() * 25)+50);
                        blue = parseInt((Math.random() * 15));
                        $(this).animate({"backgroundColor":"rgba("+red+","+green+","+blue+",1)"},1000);
                    });
                    colorLoop();
                },1000);
            }
    </script>

Answer 1

首先，您需要一个特殊的插件来为非数字属性设置动画。 http://jqueryui.com/animate/

试试这个代码 http://jsfiddle.net/tarabyte/h8s4r/

$(function(){
    function animate(el){ //animate only 1 el
        var color = [parseInt((Math.random() * 50)+190),
                   parseInt((Math.random() * 25)+85),
                    parseInt((Math.random() * 10))];
        el.animate({'backgroundColor': 'rgb('+color.join(',')+')'}, 1000, function(){ animate(el)});
    }

    $('.img').each(function(){
        var el = $(this);
        el.hide().fadeIn(((Math.random() * 1250) + 250), function() {
            animate(el); //call it for each .img once.
        });
    })
})