.repeat(callback)

Description: Begin a sequential loop that iterates instantly.

callback – function(count…), optional
a method that is called once per loop iteration.
All current iteration counts/events (from inner-most to outer-most loop) are passed as arguments.

The beginning context for each loop iteration depends on the usage of .until().


Usage pattern

$('.some').repeat().doThis().jQueryStuff().until(count);

Examples with the instant loop

Example #2: repeated blinking with iterated timeouts

By using .toggleClass() the CSS class switches from being added and removed after every timeout.

In this example a repeated timeout of 700 milliseconds is used.

$('.blink').repeat().toggleClass('blink').wait(700);

This is a blinking text.

See also another example for the same task using an interval loop instead.


Example #5: create dynamic tables with instant loops

Imagine you want to add very many table rows automatically so you can fill them with dynamic content.
E.g. a 30 x 200 sized table. Then you need only one callback method creating each cell. The rest is done via a single jQuery chain:


function createCell(x,y) {
    $('<td>').text(x+':'+y).appendTo(this);
}

$.repeat().$('<tr>').repeat(createCell).until(30)
  .appendTo('tbody').until(200);
My dynamic data:

Example #8: simple progress indicator with text

The text dots will go on and on in this example. Of course in a real use case it would be stopped using .unrepeat().

$('.progress').repeat().text('.').repeat(500).append('.').until(20);

Still processing


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


Example #16: playing pong with divs

In this example we work with two different animation queues.

The horizontal animation for the ball uses the effects queue named 'myFX'. We have to start that queue manually using .dequeue('myFX').

// the horizontal animation options
var horiz = { duration : 2000, easing : 'linear', queue : 'myFX' };

The vertical animation uses the default queue which always starts on its own. It includes all three moving elements at once.

// the vertical animation options
var vertic = { duration : 900, easing : 'linear' };

Because the two queues will be animated with different repeating intervals the ball doesn't always take the same path.

$('.example .ball').repeat()
  .animate({left:350},horiz)
  .animate({left:10},horiz).join('myFX')
  ._.dequeue('myFX');

$('.example span').repeat()
  .animate({top:160},vertic)
  .animate({top:0},vertic).join();
     

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

Example #18: falling little boxes

This example first creates 25 little boxes with an inline definition:
$('#boxparent').repeat().append('<div>').until(25)
  .children().hide();

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

A helper function is necessary to animate them in reverse order:
$.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.

A little helper function checks whether the mouse is over the image. If that's the case a deferred jQuery object waiting for the mouseleave event is returned.
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($);

Example #20: ruler with animation

This example shows how to create a ruler with an animated selection mark.

Each time the user clicks on one of the tick marks the button moves up to this mark. During its animation all underlying ticks get highlighted when the button flies by.

This is the complete code:

// add ticks to ruler
$('.ruler').repeat().append('<span class="tick">+</span>').until(20);

// define animation
$('.tick').click(function() {
  var $bubble = $(this).siblings('.bubble'),
    dir = $(this).position().left > $bubble.offset().left ? 1 : -1;

  function filter() {
    return dir * ($(this).position().left-$bubble.position().left) >= 0;
  }

  $bubble.stop(true).animate({left: $(this).position().left}, 800)
    .siblings('.tick').unrepeat().filter(filter)
    .repeat(20).not(filter).unrepeat().stop(true)
    .css({backgroundColor:'lime'}).animate({backgroundColor:'white'},'slow');
});
*