CODEWITHSUNDEEP
jquery
Kris Braun
Kris Braun

Reputation: 1412

jQuery looping animation jumps past animations

First, I tried to create a looping animation like this fiddle:

function rotator() {
  $('#foo').stop(true).delay(500).fadeIn('slow').delay(2500).fadeOut('slow',rotator);
}
$('#foo').hide();
rotator();​

This appears to skip the delay after the first iteration.

So I tried this fiddle:

function rotator() {
  $('#foo').stop(true).delay(500).fadeIn('slow').delay(2500).fadeOut('slow',rotator);
}
$('#foo').hide();
rotator();​

In this case, the fadeIn appears to jump straight to show after the first iteration.

I'm stumped. All these operations should be part of the fx queue. And even if there weren't, I can't explain why a fadeIn would change to a show. Any ideas?

Upvotes: 1

Views: 81

Answers (2)

Trevor Norris
Trevor Norris

Reputation: 21079

Is this more of the affect you're looking for:

function rotator() {
    $( '#foo' ).delay( 500 ).fadeIn( 'slow', function() {
        $( this ).delay( 2500 ).fadeOut( 'slow', rotator );
    });
}
$('#foo').hide();
rotator();

Update: Figure I should explain why you're code was having problems. In jQuery, animations are asynchronous (i.e. non-blocking). So your code was queuing the animations at the same time, but just not to run until sometime in the future. You have to run the following animation in the callback, to ensure that it doesn't fire until the previous animation has completed.

Another Update: Just tried the following code and it seemed to work. Give it a shot:

function rotator() {
    $( '#foo' ).delay( 500 ).fadeIn( 'slow' ).delay( 2500 ).fadeOut( 'slow', rotator );
}
$('#foo').hide();
rotator();

Give it a go and let me know if it works.

Upvotes: 2

ltiong_dbl
ltiong_dbl

Reputation: 3216

first thought is that the fadeIn/fadeOuts are asynchronous..so you'd go immediately to the next chained command.

For example, in your first set of code, if you did this:

function rotator() {
    $('#foo').stop(true).delay(500).fadeIn('slow', function(){
        $('#foo').delay(2500).fadeOut('slow',rotator);
    })
}
$('#foo').hide();
rotator();​

You would see your 2500ms delay.

Upvotes: 1

Related Questions