Question

I’m trying to create a simple colour change animation on a div with a counter inside that counts how many times the animation has looped. I thought this would be simple but it’s actually causing me headaches.

function AttachGo() {
    $('a#GoButton').click(function() {
        for (i = 0; i < 5; i++) {
            $('div#Timer').animate({
                backgroundColor: "#FF0000"
            }, 1000, 'linear',
                $('div#Timer').css("backgroundColor", "#22FF22"),
                $('p#Count').text("Completed: " + i)
            );
        }
    });
}

I’ve got a example I’m playing with here.

Any help greatly appreciated.

Answer 1

You need to put cycle calling as callback for animation:

http://jsfiddle.net/acrashik/pG6us/2/