jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Effects - Fading

jQuery provides a trivially simple interface for doing various kind of amazing effects.

jQuery effect methods allow us to quickly apply commonly used effects with a minimum configuration.

Example 1 (Click the DIV below):
Click to fade in/out the panel

jQuery is a fast, lightweight, and feature-rich JavaScript library that is based on the principle "write less, do more".

jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.


Example 2 (Click the DIV below):
The purpose of jQuery is to make it much easier to use JavaScript on your website.


jQuery Fading Methods

With jQuery we can fade an element in and out of visibility.

We have the following jQuery fade methods:

The following section will show you how to use each fading method.


jQuery fadeIn() and fadeOut()

The jQuery fadeIn() method gradually changes the opacity for selected elements, from hidden to visible.

The jQuery fadeOut() method gradually changes the opacity for selected elements, from visible to hidden.

The following example demonstrates the usage of fadeIn() method and fadeOut() method:

Run code

Here is the syntax for fadeIn() method:

$(selector).fadeIn(duration, easing, callback);

Here is the syntax for fadeOut() method:

$(selector).fadeOut(duration, easing, callback);

Both fadeIn() and fadeOut() methods accept three optional parameters:

  • duration - Determines how long the fading effect will run. Possible values: "slow", "fast", or milliseconds
  • easing - Indicates which easing function to use for the transition. Possible values: "swing", "linear"
  • callback - Specifies a function to call once the fading method is completed

The following example demonstrates the duration parameter with fadeIn() and fadeOut():

Run code

The following example demonstrates the callback parameter with fadeIn() and fadeOut():

Run code

Animates all spans (words in this case) to fade fastly, completing each animation within 200 milliseconds:

Run code

jQuery fadeToggle() Method

We can also toggle between fading in and fading out HTML elements using the fadeToggle() method.

If the selected elements are faded out, fadeToggle() will fade them in.

If the selected elements are faded in, fadeToggle() will fade them out.

The following example toggles between fading in and fading out all <p> elements:

Run code

Here is the syntax for fadeToggle() method:

$(selector).fadeToggle(duration, easing, callback);

The fadeToggle() method accepts three optional parameters:

  • duration - Determines how long the fading effect will run. Possible values: "slow", "fast", or milliseconds
  • easing - Indicates which easing function to use for the transition. Possible values: "swing", "linear"
  • callback - Specifies a function to call once the fading method is completed

jQuery fadeTo() Method

The jQuery fadeTo() method gradually changes the opacity for selected elements, to a specified opacity.

Note: The fadeTo() method doesn't change the layout of the page (selected element will still take up the same space as before).

This example gradually reduces the opacity of a <div> element:

Run code

Here is the syntax for fadeTo() method:

$(selector)fadeTo.(duration, opacity, easing, callback)

Parameters:

  • duration - Determines how long the fading effect will run. Possible values: "slow", "fast", or milliseconds
  • opacity - Specifies the opacity to fade to. Must be a number between 0.00 and 1.00
  • easing - (Optional) Indicates which easing function to use for the transition. Possible values: "swing", "linear"
  • callback - (Optional) Specifies a function to call once the fading method is completed

The following example demonstrates the callback parameter with fadeTo():

Run code

jQuery Effects Reference

For a complete effects reference, visit our jQuery Effects Reference.