Methods for Animation Effects with jQuery 1.4

Exclusive offer: get 50% off this eBook here
jQuery Reference Guide

jQuery Reference Guide — Save 50%

A Comprehensive Exploration of the Popular JavaScript Library

£14.84    £7.42
by Jonathan Chaffer Karl Swedberg | January 2010 | AJAX Open Source Web Development

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

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

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

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='//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:

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

jQuery Reference Guide A Comprehensive Exploration of the Popular JavaScript Library
Published: July 2007
eBook Price: £14.84
Book Price: £24.99
See more
Select your format and quantity:

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

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

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='//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:

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

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

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 :


jQuery Reference Guide A Comprehensive Exploration of the Popular JavaScript Library
Published: July 2007
eBook Price: £14.84
Book Price: £24.99
See more
Select your format and quantity:

About the Author :


Jonathan Chaffer

Jonathan Chaffer is a member of Rapid Development Group, a web development firm located in Grand Rapids, Michigan. His work there includes overseeing and implementing projects in a wide variety of technologies, with an emphasis in PHP, MySQL, and JavaScript. He also leads on-site training seminars on the jQuery framework for web developers.

In the open source community, he has been very active in the Drupal CMS project, which has adopted jQuery as its JavaScript framework of choice. He is the creator of the Content Construction Kit, a popular module for managing structured content on Drupal sites. He is also responsible for major overhauls of Drupal's menu system and developer API reference.

He lives in Grand Rapids with his wife, Jennifer.

Karl Swedberg

Karl Swedberg is a web developer at Fusionary Media in Grand Rapids, Michigan, where he spends much of his time making cool things happen with JavaScript. As a member of the jQuery team, he is responsible for maintaining the jQuery API site at api.jquery.com. He is also a member of jQuery's Board of Advisors and a presenter at workshops and conferences. When he isn't coding, he likes to hang out with his family, roast coffee in his garage, and exercise at the local CrossFit gym.

Books From Packt

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery

jQuery 1.3 with PHP
jQuery 1.3 with PHP

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

AJAX and PHP: Building Modern Web Applications 2nd Edition
AJAX and PHP: Building Modern Web Applications 2nd Edition

Backbase 4 RIA Development
Backbase 4 RIA Development

CodeIgniter 1.7
CodeIgniter 1.7

TYPO3 4.3 Multimedia Cookbook
TYPO3 4.3 Multimedia Cookbook

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software