Question

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?

Answer 1

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.