the sequential each-loop
.each($)

Example #6: iterate all selected elements with a timeout

Here we combine two loops. The outer loop is an open interval loop repeating once per second. The inner loop is a sequential each-loop toggling the CSS class for every selected span element with a timeout after each step.

$('.example span').repeat(1000)
  .each($).toggleClass('bold').wait(50);

This is a sample sentence with some words.

Example #12: cyclic button clicks

The buttons can be clicked one after the other. At the end the cycle starts over and over.

Remark that the code is the same no matter how many buttons we have.

$('.example button').repeat().each($)
   .attr('disabled',false).one('click')
   .attr('disabled',true).until(false);

Hit me first! Then click me! And then me!

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});

Example #18: falling little boxes

$('#boxparent').repeat().append('<div>').until(25)
  .children().hide();

These 25 boxes shall be animated as falling down with each button click.

$.fn.reverse = function() {
  return this.$(this.get().reverse());
}

Try clicking on that button multiple times during animation. With .stop(true,true) and .unwait() all animations are reset at the beginning.

$('button').on('click').fadeTo('slow',0.3)
  .$('#boxparent div').stop(true,true).unwait()
  .css({top:-300}).show().reverse()
  .each($).animate({top:0},500).wait(100).all()
  .wait(500).fadeOut('slow')
  .$('button').wait(200).fadeTo('slow',1);

Example #19: pause animation cycle on mouseover

There is a animation cycle rotating three images. Once you move the mouse cursor over it, it pauses until the mouse is moved away.

function noHover() {
    return this.is(':hover') ? this.wait('mouseleave') : this
}

The running loop can be written in a single jQuery line.

$('#images > img').hide().repeat().each($).fadeIn($)
    .wait(1000).wait(noHover).fadeOut($);