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.
        });
    })
})

是什么打破了jQuery动画的这个功能？

1 个答案: