how to wait on parent element until childs stop animate()

Question

I got bunch of LI elements animating (slideDown) inside UL. After LI finish their animation I want to add A-HREF element below UL.

There is a problem - if I use

$('li').animate(SPEED, callback)

to wait for LIs finish its animation, my callback will be called n-times (n = count LI) - if I have 20 LIs, 20 A-HREFs will be added bellow UL. I need onlt one A-HREF, in the other words, I need to wait, until LI finish theirs animation and then fire ONE callback.

Any idea?

Answer 1

Can you not use the UL element for your animation, this will provide only one callback.

If you cannot do this, please give your reasons, it's pretty difficult to offer advice otherwise.

Answer 2

try,

$('li').animate(SPEED, callback);

callback = function(){
   if ($(this).siblings(':animated').length < 1) { // check if other li's are still animating...
      // do parent animation or anything here...
   }
}