jQuery - Effects

jQuery provides a trivially simple interface for creating amazing effects. jQuery methods allow us to quickly apply commonly used effects with minimal configuration. This tutorial covers all the important jQuery methods for creating visual effects.

Showing and hiding elements

The commands for showing and hiding elements are pretty much what we expected - show() will show the elements in the wrapped set and hide() to hide them.

Syntax

Here is the simple syntax for show() method −

[selector]. show(speed, [callback]);

Here is a description of all options −

• speed - A string representing one of three predefined speeds (slow, normal, or fast) or the number of milliseconds to run the animation (for example, 1000).

• callback - this optional parameter represents a function to be executed when the animation ends; runs once for each element animated against.

speed - A string representing one of three predefined speeds (slow, normal, or fast) or the number of milliseconds to run the animation (for example, 1000).

callback - this optional parameter represents a function to be executed when the animation ends; runs once for each element animated against.

Following is the simple syntax of the hide() method:

[selector]. hide(speed, [callback]);

Here is a description of all options −

• speed - A string representing one of three predefined speeds (slow, normal, or fast) or the number of milliseconds to run the animation (for example, 1000).

• callback - this optional parameter represents a function to be executed when the animation ends; runs once for each element animated against.

speed - A string representing one of three predefined speeds (slow, normal, or fast) or the number of milliseconds to run the animation (for example, 1000).

callback - this optional parameter represents a function to be executed when the animation ends; runs once for each element animated against.

Switching elements

jQuery provides methods for toggling the display state of elements between expanded or hidden. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

Syntax

Here is a simple syntax for one of the toggle() methods −

[selector]. .toggle([speed][, callback]);

Here is a description of all options −

• speed - A string representing one of three predefined speeds (slow, normal, or fast) or the number of milliseconds to run the animation (for example, 1000).

• callback - this optional parameter represents a function to be executed when the animation ends; runs once for each element animated against.

speed - A string representing one of three predefined speeds (slow, normal, or fast) or the number of milliseconds to run the animation (for example, 1000).

callback - this optional parameter represents a function to be executed when the animation ends; runs once for each element animated against.