timing methods used in example #17

Example #17: scheduling different elements' animations

Here we use an instant repeat-loop together with a sequential each-loop.

In each iteration step we wait until the element is completely shifted up using .animate({opacity:0,top:-50},$)​. Then the next animation is queued with .animate({opacity:1,top:0}), which shifts the element down again but without waiting. The loop starts its next iteration, now using the next element. So we have one element going up and another element going down simultaneously.

As you see the usage of $ as token in place of the animate callback handler decides about whether to wait for the animation to finish. 

$('.example span').repeat().each($)
    .animate({opacity:0,top:50},$)
    .animate({opacity:1,top:0});
⇒
A B C D E
​

Other examples with animations

Other examples with each-loops

Other examples with instant loops

Other examples with open loops

Other examples with repeat-loops