是什么用jQuery动画打破了此功能？

Question

I am attempting to cycle through random shades of orange in a grid-work of divs. This is a version of the page WITHOUT the broken function: 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();
                    });
                });
            }

I based this function off of these two threads:

jQuery animate loop

How to make a jquery infinite animation?

This function not only does not work, but breaks all the other animation scripts I have in the document. (Those scripts all work if I comment out the colorLoop function)

I call the function initially here:

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

Any an all help with getting this to work will be greatly appreciated because I have absolutely no idea what I am doing wrong. =_=

---

SOLVED! Thanks to YuryTarabanko and SparK ! :)

---

See it in action!

Final code:

        <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

First of all you need a special plugin to animate nonnumeric properties. http://jqueryui.com/animate/

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