jQuery fades in and out

With jQuery, you can achieve the fade in and out of the element.

jQuery Fading method


With jQuery, you can achieve the fade in and out of the element.

jQuery has the following four fade methods:

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

jQuery fadeIn() method


jQuery fadeIn() is used to fade in hidden elements.

Grammar:

$(selector).fadeIn(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds. .

The optional callback parameter is the name of the function that is executed after fading is completed.

The following example demonstrates the fadeIn() method with different parameters:

 
Run the program and try it out

jQuery fadeOut() method


The jQuery fadeOut() method is used to fade out visible elements.

Grammar:

$(selector).fadeOut(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of the function that is executed after fading is completed.

The following example demonstrates the fadeOut() method with different parameters:
Run the program and try it out

jQuery fadeToggle() method


The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

If the element has faded out, fadeToggle() adds a fade in effect to the element.

If the element has faded in, fadeToggle() adds a fade-out effect to the element.

Grammar:

$(selector).fadeToggle(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of the function that is executed after fading is completed.

The following example demonstrates the fadeToggle() method with different parameters:

 
Run the program and try it out

jQuery fadeTo() method


The jQuery fadeTo() method allows the gradient to be a given opacity (values ​​between 0 and 1).

grammar:

$(selector).fadeTo(speed,opacity,callback);

The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.

The required opacity parameter in the fadeTo() method sets the fade effect to the given opacity (values ​​between 0 and 1).

The optional callback parameter is the name of the function that is executed after the function completes.

The following example demonstrates the fadeTo() method with different parameters:

 
Run the program and try it out


Last Updated: 2018-11-24 14:14:49 By Akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :