CODEWITHSUNDEEP
jqueryhtmlcssanimationinfinite-loop
jesuisunelegend
jesuisunelegend

Reputation: 15

Make a repeating animation

I'm trying to make a repeating animation using jQuery. I used a while loop with the condition set to true, but I think the browser doesn't like it.

What is the way to do this properly?

http://jsfiddle.net/8cV2R/2/

$('.test').click(function () {
    while (true) {
        $(this).hide(1000);
        $(this).show(1000);
    }
});

Upvotes: 0

Views: 89

Answers (3)

Bram Vanroy
Bram Vanroy

Reputation: 28554

You'll need to write a function that has itself as a callback. That's how you loop a function.

http://jsfiddle.net/8cV2R/8

$('.test').click(fadeIt);

function fadeIt() {
    $('.test').hide(1000, function() {
        $('.test').show(1000, fadeIt);
    });
}

Upvotes: 0

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33880

This should be enough :

$('.test').click(doMe);

function doMe(){
    $(this).hide(1000).show(1000, doMe);
}

http://jsfiddle.net/8cV2R/7/

jQuery queue animation for you.

Upvotes: 2

j08691
j08691

Reputation: 208032

function h() { $(this).hide(1000, s); };
function s() { $(this).show(1000, h); };
$('.test').click(h);

jsFiddle example

Or, without the width/height animation that hide/show creates when specifying a duration so you get more of a blink effect: jsFiddle example

Upvotes: 0

Related Questions