Search within TutorialsPark

Jquery Basic Effects


Learn to use jQuery to perform some basic show and hide effects


jQuery Effects: Basic Effects

jQuery provides a set of methods that can be used to perform some simple basic effects to show or hide elements

Table : jQuery Basic Effect Methods

Method Description
hide() To hide all of the elements in a jQuery Object.
hide(time)
hide(time, easing)
To hide the elements in a jQuery object over the specified period of time with an optional easing style.
hide(time, function)
hide(time, easing, function)
To hide the elements in a jQuery object over the specified period of time with an optional easing style and a function that is called when the effect is complete.
show() To show all of the elements in a jQuery Object
show(time)
show(time, easing)
To show the elements in a jQuery object over the specified period of time with an optional easing style.
show(time, function)
show(time, easing, function)
To show the elements in a jQuery object over the specified period of time with an optional easing style and a function that is called when the effect is complete
toggle() To toggle the visibility of the elements in a jQuery Object.
toggle(time)
toggle(time, easing)
To toggle the visibility of the elements in a jQuery Object over the specified period of time with an optional easing style.
toggle(time, function)
toggle(time, easing, function)
To toogle the visibility of the elements in a jQuery over the specified period of time with an optional easing style and a function that is called when the effect is complete.
toggle(boolean) To toggle the elements in a jQuery object in one direction.

jQuery Effects : Show and Hide Methods without Arguments

The jQuery method of trigger() is used to manually invoke the event handlers.

The trigger() method executes the handlers in the same order as they would be executed if the events were triggered naturally.

Example: Show and Hide Methods without Arguments

Give it a TRY! » Note: It returns a jQuery Object, which can be used for chaining purposes


jQuery Effects : Using toggle Method to Switch Element Visibility

A jQuery method of toggle() can be used to flip elements from being visible or hidden and back.

Example: Using toggle Method to Switch Element Visibility

Give it a TRY! » Note:If no class names are specified in the parameter, all classes will be removed.


jQuery Effects : Using the toggle(boolean) Method in one Direction

The jQuery method of toogle(boolean) `is used to restrict the way the visibility gets toggled.

If the argument is true , then only hidden element will be shown.If the value is false then the visible elements will be hidden, but hidden elements will not be made visible.

Example: jQuery Effects: Using the toggle(boolean) Method in one Direction

Give it a TRY! » Note:The method can take one or more class names as its parameter.


jQuery Effects : Animating the Visibility of Elements

The jQuery method of toggle() can also be used to animate the process of showing and hiding elements by specifying a timespan to show, hide or toggle.

Table : jQuery Basic Effect Methods

Method Description
milliseconds To specify a duration in milliseconds.
slow A shorthand almost equal to 600 milliseconds.
fast A shorthand almost equal to 200 milliseconds.

Example: Animating the Visibility of Elements

Give it a TRY! » Note:If no value is returned , jQuery removes all classes from the element.


jQuery Effects : Using Effect Callbacks

A function can be supplied as an argument to the methods of show , hide and toggle, this function will be called when the methods are done performing their effects.

These functions are generally used for updating other elements to reflect the change in the status, and specify the current status.

Example: jQuery Effects : Using Effect Callbacks

Give it a TRY! » Note:If no value is returned , jQuery removes all classes from the element.


jQuery Effects : Creating looping Effects

The jQuery callback function can be used to perform effects which are created by looping the function over and over.

Example: Creating looping Effects

Give it a TRY! » Note:If no value is returned , jQuery removes all classes from the element.