jQuery Fading Effects

jQuery - Fading Effects

jQuery Fading Effects are used to show the hidden element gradually. After applying the fadeIn() method element opacity gradually increases from zero to one.

There are following jQuery fading methods.

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Jquery fadeIn() Method

Jquery fadeIn() method is used to show the hidden element gradually. After applying the fadeIn() method element opacity is gradually increased from zero to one. Therefore hidden element is shown gradually.

General Syntax


speed: It is an optional parameter. It specifies the speed of the delay of the fadeIn() method. It has the following values: "slow", "fast" and millisecond.

easing: It specifies the easing function that is used for transition.

callback: It is also an optional parameter. The callback function will be called after the completion of fadein() effect.

Source Code

Try it now

Jquery fadeOut() method

jQuery fadeOut() method hides the visible element means this method decreases the opacity of the selected element from one to zero hence element is not shown on the screen.

General Syntax

Try it now

Source Code

Try it now

Please keep in mind that speed and callback both are optional parameters.

The optional speed parameter indicates the fadeOut duration and it takes the following string values "slow" and "fast" and milliseconds

The optional callback function is executed whenever the fadeOut() method completes.

jQuery fadeToggle() Method

The jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the elements are faded out then fadeToggle() method is used to fade in the element on the other hand if the element is faded in then fadeToggle() is used to fade out the element.

General Syntax Of fadeToggle() Method

General Syntax

Try it now

Source Code

Try it now

Please keep in mind that both parameters are optional. The optional parameter speed indicates the duration of fadeToggle() method and it takes the following values: "slow", "fast" or milliseconds.

The optional parameter callback function is worked whenever the fadeToggle() method is completed.

jQuery fadeTo() Method

The jQuery fadeTo() method is used to fade the element for a given opacity(between 0 and 1).

General Syntax

Try it now

Source Code

Try it now

Please keep in mind that the required parameter speed indicated the duration of effect.It takes the following values:"fast","slow" and milliseconds.

Opacity is the required parameter that fades the element for a specific opacity. Its value varies between 0 to 1.

The callback is the optional parameter of the fadeTo() method that works whenever the fadeTo() method completes.