classical usage of .animate()

`.animate(…)`

Description: Push an animation onto the animation queue and return immediately.

… – miscellaneous parameters: any parameter accepted by the original .animate().

See jQuery API for .animate(…).

Usage pattern

$('.some').animate(attributes,options);

Other versions of animate(…)

Examples with classical usage of `.animate()`

Example #11: change the banner randomly in an interval loop

Given that you have a method which selects any element from the current jQuery set randomly,
e.g.

$.fn.random = function(){ return this.eq(
  Math.floor(Math.random()*this.length)) }

,
then you can use that to build a banner rotator very easily.

In this example there are four different banners. Every 5 seconds another one fades in, randomly chosen.

As we don't want to wait for the animations finishing we use the original version of .fadeIn() and .fadeOut() here.

$('#banners > *').hide().repeat(5000,true)
   .fadeOut(1000).siblings().random().fadeIn(1000)
.until($);

⇒

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

⇒

classical usage of .animate() .animate(…)

.animate(…)