Question

I need to run 3 jquery actions one after the other every 20 seconds.

I need to to:

1. first fadeOut() #recent
2. then when that has finished click() .next
3. then fadeIn #recent() again

Not sure it it makes any difference but .next is a child of #recent.

This is what I have so far:

$('#recent').fadeOut();
$('#recent .next').click();
$('#recent').fadeIn();

The problem is the click triggers before the fadeOut() has finished.

Thanks
C

Answer 1

The issue is that click fires the simulated event as soon as it is invoked because it is not part of the animation event queue.

The easy was is to use the [on completed] callback for fadeOut:

$('#recent').fadeOut(function () {
  $('#recent .next').click()
}).fadeIn()

Note that the fadeIn animation is registered on the animation queue and thus “works as expected”, even when not in the callback.

Happy coding.