jQuery

Custom effects

jQuery provides methods that allow you to create custom effects based on a queue of functions to be executed and animation of CSS properties (actually jQuery will generate functions that will be placed in the queue).

Fading and sliding are predefined animations in jQuery.

Animated properties are specified as an object of CSS properties and values that the animation will move toward. Possible values of animated properties are:

  • single numeric value to which property will be animated; default units are pixels
  • relative numeric value, which is supplied with a leading += or -=
  • special string values show, hide, toggle that allow to take into account the display type of the element
// if #book was visible before click, 
// the animation will reduce the height to 0 to hide it. 
// A second click will reverse this transition.
$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

A function queue are used to change non-numeric properties, for example add/remove classes of HTML element.

Animations may be stopped globally by $.fx.off = true. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.

The default value of the queue parameter is "fx".

method description
animate(properties [,duration] [,easing] [,complete ]) Performs a custom animation of a set of CSS properties.
animate(properties ,opt) Performs a custom animation of a set of CSS properties.
stop([clearQueue][,isJumpToEnd]) Stops the currently-running animation.
stop([queue][,clearQueue][,isJumpToEnd]) Stops the currently-running animation.
finish([queue])

Stops the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

The finish() method is similar to stop(true, true) in that it clears the queue and the current animation jumps to its end value. It differs, however, in that finish() also causes the CSS property of all queued animations to jump to their end values, as well.

queue([queue]) Show the queue of functions to be executed on the selected elements.
dequeue([queue]) Executes the next function on the queue for the selected elements. When dequeue() is called, the next function on the queue is removed from the queue, and then executed.
clearQueue() Removes from the queue all items that have not yet been run.
delay(duration [, queue]) Set a timer to delay execution of subsequent items in the queue. The delay() method is best for delaying between queued jQuery effects. Because it is limited — it doesn't, for example, offer a way to cancel the delay. delay() is not a replacement for JavaScript's native setTimeout() function, which may be more appropriate for certain use cases.