是什么用 jQuery 动画破坏了这个功能？答案

【问题标题】：What is breaking this function with jQuery animations?是什么用 jQuery 动画破坏了这个功能？
【发布时间】：2014-07-16 12:07:45
【问题描述】：

我正在尝试在 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>

【问题讨论】：

您有超过 1 张图片吗？因为如果你调用了 each，它们中的每一个都调用了调用 each 的函数......好吧......
来自 jquery docs "所有动画属性都应该被动画化为一个单一的数值，除了下面提到的；大多数非数字属性不能使用基本的 jQuery 功能来动画（例如，宽度、高度, 或 left 可以设置动画但 background-color 不能，除非使用了 jQuery.Color() 插件）。"
@Yury Tarabanko 您的回答绝对是最有帮助的。谢谢你。我已经让彩色动画工作了，现在我必须弄清楚如何让它不中断其他动画。 ^^
当这个动画中断另一个动画时，你能用我提供的链接做一个演示吗？
请在答案中发布您的解决方案并将其从问题中删除，几天后您可以接受适合您的答案（说明解决您的问题的方法）请参阅tour

标签： javascript jquery jquery-animate infinite-loop

【解决方案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.
        });
    })
})

【讨论】：