jquery animate question

Question

I am attempting to animate fireflies to fade in, pulsate and then fade out. I am using the code below, but the final animate seems to fire before the pulsate effect. if I remove the pulsate it works as well. Ideas?

$('#fireflies').animate({'opacity':1}, 20000)
  .effect('pulsate', { times:6 }, 3500)
  .animate({'opacity':0}, 20000);

Answer 1

You should chain these using callbacks. That way, the next effect won't be queued until the previous effect has been completed.

$('#fireflies').animate({'opacity':1}, 20000, function() {
     $(this).effect('pulsate', { times:6 }, 3500, function() {
         $(this).animate({'opacity':0},20000);
     });
});