The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used and the ability to craft sophisticated custom effects. In this article by Karl Swedberg and Jonathan Chaffer, authors of jQuery 1.4 Reference Guide, we'll closely examine each of the pre-packaged effect methods, revealing all of the mechanisms jQuery has for providing visual feedback to the user.

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

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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.');
});
});

.hide()

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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.');
});
});

.toggle()

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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:

A second click will show the element once again:

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().

jQuery Reference Guide

A Comprehensive Exploration of the Popular JavaScript Library

Published: July 2007
eBook Price: £14.84
Book Price: £24.99
See more

close

Select your format and quantity:

Book 01234567891011121314151617181920

eBook 01234567891011121314151617181920

.slideDown()

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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.');
});
});

.slideUp()

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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.');
});
});

.slideToggle()

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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:

A second click will show the element once again:

.fadeIn()

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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.');
});
});

.fadeOut()

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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.');
});
});

.fadeTo()

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

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 :

• Customized Effects with jQuery 1.4
• jQuery 1.4 DOM Insertion Methods
• jQuery 1.4 DOM Manipulation Methods for Style Properties and Class Attributes
• jQuery 1.4 DOM Manipulation Methods for Replacement, Copying and Removal

jQuery Reference Guide

A Comprehensive Exploration of the Popular JavaScript Library

Published: July 2007
eBook Price: £14.84
Book Price: £24.99
See more

close

Select your format and quantity:

Book 01234567891011121314151617181920

eBook 01234567891011121314151617181920

About the Author :

Books From Packt