Question

So far, I have a simple script that checks the size of the document and creates a 1px div for each line in the doc and applies a random color to each line. I want to animate each lines background color individually, so all the lines pulsate and change colors.

Here is my code:

<script type="text/javascript">
    $(document).ready(function() {
        var pageHeight = $(window).height();
        for(var i = 0; i < pageHeight; i++) {
            $('body').prepend('<div class="myDiv '+i+'"></div>');
        };

        $('.myDiv').each(function() {
            var myColor = randomColor();
            //alert (myColor);
            $(this).css("background-color", "rgb(" + myColor + ")");
        });
    });

    function randomColor () {
        var color1 = randomFromTo(100,255);
        var color2 = randomFromTo(200,255);
        var color3 = randomFromTo(0,100);
        return color1 + "," + color2 + "," + color3;
    };

    function randomFromTo(from, to){
        return Math.floor(Math.random() * (to - from + 1) + from);
    }
</script>

<style>
    body { margin:0; }
    .myDiv { height:1px; }
</style>

Answer 1

There is probably a more elegant way to do this, but this is what I came up with. Create a function for the animate. Then use the functions callback to cycle.

http://jsfiddle.net/cYzmp/

You will need to use jQuery UI because default jQuery does not support animation of background colors. I am using it in the fiddle.

Also, this is incredibly cpu intensive. It has one of my two processors pegged at 50% all the time. I don’t think you can expect your users to have a very pleasant experience if this is going to be going on all the time.

$('.myDiv').each(function() {
        var myColor = randomColor();
        $(this).css("background-color", "rgb(" + myColor + ")");
        animateBG(this);
    });    
});

function animateBG(element) {
    $(element).animate({ backgroundColor: "rgb(" + randomColor() + ")"}, 3000, function() {
        animateBG(this);
    });
}