Methods for Animation Effects with jQuery 1.4

jQuery Reference Guide

,
July 2007

$10.00

A Comprehensive Exploration of the Popular JavaScript Library

Some of the examples in this article use the $.print() function to print results to the page.

Pre-packaged effects

These methods allow us to quickly apply commonly-used effects with a minimum of configuration.

.show()

Display the matched elements.

.show([duration][, callback])

Parameters

  • duration (optional): A string or number determining how long the animation will run
  • callback (optional): A function to call once the animation is complete

Return value

The jQuery object, for chaining purposes.

Description

With no parameters, the .show() method is the simplest way to display an element.

$('.target').show();

The matched elements will be revealed immediately with no animation. This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

When a duration is provided, .show() becomes an animation method. The .show() method animates the width, height, and opacity of the matched elements simultaneously.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially hidden, we can show it slowly.

$('#clickme').click(function() {
$('#book').show('slow', function() {
$.print('Animation complete.');
});
});

jQuery 1.4 Reference Guide

.hide()

Hide the matched elements.

.hide([duration][, callback])

Parameters

  • duration (optional): A string or number determining how long theanimation will run
  • callback (optional): A function to call once the animation is complete

Return value

The jQuery object, for chaining purposes.

Description

With no parameters, the .hide() method is the simplest way to hide an element.

$('.target').hide();

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, and then is hidden and shown, it will once again be displayed inline.

When a duration is provided, .hide() becomes an animation method. The .hide() method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially shown, we can hide it slowly.

$('#clickme').click(function() {
$('#book').hide('slow', function() {
$.print('Animation complete.');
});
});

jQuery 1.4 Reference Guide

.toggle()

Display or hide the matched elements.

.toggle([duration][, callback])
.toggle(showOrHide)

Parameters (first version)

  • duration (optional): A string or number determining how long the animation will run
  • callback (optional): A function to call once the animation is complete

Parameters (second version)

  • showOrHide: A Boolean indicating whether to show or hide the elements

Return value

The jQuery object , for chaining purposes.

Description

With no parameters, the .toggle() method simply toggles the visibility of elements:

$('.target').toggle();

The matched elements will be revealed or hidden immediately with no animation. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

When a duration is provided, .toggle() becomes an animation method. The .toggle() method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

We will cause .toggle() to be called when another element is clicked.

$('#clickme').click(function() {
$('#book').toggle('slow', function() {
$.print('Animation complete.');
});
});

With the element initially shown, we can hide it slowly with the first click:

jQuery 1.4 Reference Guide

A second click will show the element once again:

jQuery 1.4 Reference Guide

The second version of the method accepts a Boolean parameter. If this parameter is true, then the matched elements are shown; if false, the elements are hidden.

In essence, the following statement

$('#foo').toggle(showOrHide);

is equivalent to:

if (showOrHide) {
$('#foo').show();
}
else {
$('#foo').hide();
}

There is also an event method named .toggle().

.slideDown()

Display the matched elements with a sliding motion.

.slideDown([duration][, callback])

Parameters

  • duration (optional): A string or number determining how long the animation will run
  • callback (optional): A function to call once the animation is complete

Return value

The jQuery object, for chaining purposes.

Description

The .slideDown() method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially hidden, we can show it slowly.

$('#clickme').click(function() {
$('#book').slideDown('slow', function() {
$.print('Animation complete.');
});
});

jQuery 1.4 Reference Guide

.slideUp()

Hide the matched elements with a sliding motion.

.slideUp([duration][, callback])

Parameters

  • duration (optional): A string or number determining how long the animation will run
  • callback (optional): A function to call once the animation is complete

Return value

The jQuery object , for chaining purposes.

Description

The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items. Once the height reaches 0, the display> style property is set to none to ensure that the element no longer affects the layout of the page.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

If supplied, the callback is fi red once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially shown, we can hide it slowly.

$('#clickme').click(function() {
$('#book').slideUp('slow', function() {
$.print('Animation complete.');
});
});

jQuery 1.4 Reference Guide

.slideToggle()

Display or hide the matched elements with a sliding motion.

.slideToggle([duration][, callback])

Parameters

  • duration (optional): A string or number determining how long the animation will run
  • callback (optional): A function to call once the animation is complete

Return value

The jQuery object, for chaining purposes.

Description

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline. When the height reaches 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

We will cause .slideToggle() to be called when another element is clicked.

$('#clickme').click(function() {
$('#book').slideToggle('slow', function() {
$.print('Animation compl ete.');
});
});

With the element initially shown, we can hide it slowly with the first click:

jQuery 1.4 Reference Guide

A second click will show the element once again:

jQuery 1.4 Reference Guide

.fadeIn()

Display the matched elements by fading them to opaque.

.fadeIn([duration][, callback])

Parameters

  • duration (optional): A string or number determining how long the animation will run
  • callback (optional): A function to call once the animation is complete

Return value

The jQuery object, for chaining purposes.

Description

The .fadeIn() method animates the opacity of the matched elements. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially hidden, we can show it slowly.

$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
$.print('Animation complete.');
});
});

jQuery 1.4 Reference Guide

.fadeOut()

Hide the matched elements by fading them to transparent.

.fadeOut([duration][, callback])

Parameters

  • duration (optional): A string or number determining how long the animation will run
  • callback (optional): A function to call once the animation is complete

Return value

The jQuery object, for chaining purposes.

Description

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

With the element initially shown, we can hide it slowly.

$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
$.print('Animation complete.');
});
});

jQuery 1.4 Reference Guide

.fadeTo()

Adjust the opacity of the matched elements.

.fadeTo(duration, opacity[, callback])

Parameters

  • duration: A string or number determining how long the animation will run
  • opacity: A number between 0 and 1 denoting the target opacity
  • callback (optional): A function to call once the animation is complete

Return value

The jQuery object, for chaining purposes.

Description

The .fadeTo() method animates the opacity of the matched elements. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, the default duration of 400 milliseconds is used. Unlike the other effect methods, .fadeTo() requires that duration be explicitly specified.

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
$.print('Animation complete.');
});
});

With the element initially shown, we can dim it slowly.

$('#clickme').click(function() {
$('#book').fadeTo('slow', 0.5, function() {
$.print('Animation complete.');
});
});

jQuery 1.4 Reference Guide

With duration set to 0, this method just changes the opacity CSS property, so .fadeTo(0, opacity) is the same as .css('opacity', opacity).

Summary

This article defines the range of pre-packaged effects and animations built into jQuery 1.4. jQuery also provides the toolkit for building your own effects and animations which is not explored in this article.


If you have read this article you may be interested to view :


Books to Consider

comments powered by Disqus