CODEWITHSUNDEEP
jqueryloopsjquery-animatecounter
Dan Twining
Dan Twining

Reputation: 650

jQuery Looping Animation with Counter

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.

Upvotes: 0

Views: 1000

Answers (2)

Sergei Zahharenko
Sergei Zahharenko

Reputation: 1524

You need to put cycle calling as callback for animation:

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

Upvotes: 2

Moin Zaman
Moin Zaman

Reputation: 25455

It looks like you need the step function of animate. look here: blog.gabrieleromanato.com/2011/03/jquery-animation-steps/

Upvotes: 0

Related Questions