是啥用 jQuery 动画破坏了这个功能？

Posted 2023-05-08

【中文标题】是啥用 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

【参考方案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.
        );
    )
)