jQuery Fading Effects




jQuery Effect fadeIn() method

jQuery fadeIn() method changes the opacity level from invisible state to a visible state of a selected element.


Syntax

The jQuery fadeIn() method animates the opacity of the selected elements. Duration is the parameter to delay process that is in milliseconds. Duration can be used like higher values indicate slower animations. The strings 'fast' and 'slow' can be supplied as parameters to indicate a duration of 200 and 600 milliseconds, respectively. The default duration is 400 milliseconds.

Example
Output

Try It Now

jQuery Effect fadeOut() Method

The jQuery fadeOut() method changes the opacity level to invisible state of a selected element. Meaning the selected element will be in a transparent mode of display.

Syntax

The jQuery fadeOut() method animates the opacity of the selected elements. Duration is the parameter to delay method which is in milliseconds. Duration can be used like higher values indicate slower animations. The strings 'fast' and 'slow' can be supplied as parameters to indicate durations of 200 and 600 milliseconds, respectively. The default duration is 400 milliseconds.

The following example illustrates usage of fadeOut(). In this example, the ‘p’ element will be in transparent display by simply calling $( "p" ).fadeOut( "slow" ) where slow is duration string.

Example
Output

Try It Now

jQuery fadeTo () Method

jQuery fadeTo() method allows to fade a selected element to a given opacity. Opacity value starts from 0 to 1.

Syntax

The jQuery fadeTo() method animates the opacity of the selected elements. Duration is the parameter to delay the process that is in milliseconds. Duration can be used like higher values indicate slower animations. The strings 'fast' and 'slow' can be supplied as parameters to indicate durations of 200 and 600 milliseconds, respectively. The default duration is 400 milliseconds.

The following example illustrates usage of fadeTo(). In this example the ‘p’ element will be fade to 0.33 by simply calling $( "this" ).fadeTo( "slow", 0.33 ) where slow is duration string.

Example
Output

Try It Now

Other Advanced jQuery Effects you might want to learn
jQuery Effects

jQuery Basic Effects

jQuery Sliding Effects

jQuery Custom Effects

Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 11, 2015, 02:05:15 PM