timing methods used in example #20

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');
});
​
⇒
*
​

Other examples with animations

Other examples with chain interruption

Other examples with closed loops

Other examples with instant loops

Other examples with intervals

Other examples with open loops

Other examples with repeat-loops