Search within TutorialsPark

Jquery Fade Effects


Learn to use jQuery to apply fade effects to show and hide elements


jQuery Effects: Fade Effects

jQuery provides a set of methods that can be used to apply fade effect inorder to show and hide elements by reducing their opacity(i.e transparency).

Table : jQuery Basic Effect Methods

Method Description
fadeOut()
fadeOut(timespan)
fadeOut(timespan, function)
fadeOut(timespan, easing, function)
To hide elements by decreasing opacity
fadeIn()
fadeIn(timespan)
fadeIn(timespan, function)
fadeIn(time, easing, function)
To show elements by increasing opacity.
fadeTo(timespan, opacity)
fadeTo(timespan, opacity, easing, function)
To change the opacity to the specified level
fadeToggle()
fadeToggle(timespan)
fadeToggle(timespan, function)
fadeToggle(time, easing, function)
To toggle the visibility of elements using opacity.

jQuery Effects : Using fadeOut() Method

The jQuery method of fadeOut() is used to select elements that are not hidden, and then removes them from the display by gradually changing their opacity to 0 percent and then removing the element from display.

Example: jQuery fadeOut() Methods

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


jQuery Effects : Using fadeIn() Method

A jQuery method of fadeIn() can be used match hidden elements and display them by changing their opacity to natural values, i.e either the set value or 100 percent(i.e opacity 1).

Example: Using fadeIn() Method

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


jQuery Effects : Using the fadeTo() Method

The jQuery method of fadeTo(duration, opacity, function) is used to animate the CSS opacity of the selected element to the specified opacity and duration, when done the callback function is invoked.

It gradually sets the opacity of the matched element from the current setting to the specified opacity.

Example: jQuery Effects: Using the fadeTo() Method

Give it a TRY! » Note:The arguments of timespan and opacity should be provided always.


jQuery Effects : Animating the Visibility of Elements

The jQuery method of fadeToggle() 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 Visibility using fadeToggle()

The jQuery Method of fadeToggle() is used to toggle the visibility of elements by changing the opacity values.

Give it a TRY! » Note:All arguments are optional in nature.