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.');
});
});
.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.');
});
});
.toggle()
|
Display or hide the matched elements. .toggle([duration][, callback]) |
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:
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().
