Latest web development tutorials

jQuery effects - fade

By jQuery, you can implement elements fade out effect.

Click the Display Fade In / Out panel

Because time is precious, we offer a fast and convenient way to learn.

In this tutorial, you can learn the knowledge needed.


Examples

jQuery fadeIn ()
Demo jQuery fadeIn () method.

jQuery fadeOut ()
Demo jQuery fadeOut () method.

jQuery fadeToggle ()
Demo jQuery fadeToggle () method.

jQuery fadeTo ()
Demo jQuery fadeTo () method.


jQuery Fading Method

By jQuery, you can implement elements fade out effect.

jQuery has four fade the following methods:

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

jQuery fadeIn () method

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

grammar:

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

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

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

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

Examples

$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

try it"


jQuery fadeOut () method

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

grammar:

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

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

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

The following example demonstrates, with different parameters fadeOut () method:

Examples

$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});

try it"


jQuery fadeToggle () method

jQuery fadeToggle () method can be switched between fadeIn () and fadeOut () method.

If the element has left, the fadeToggle () will add a fade effect to the elements.

If the element is a fade, the fadeToggle () will add a fade-out effect to the elements.

grammar:

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

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

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

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

Examples

$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});

try it"


jQuery fadeTo () method

jQuery fadeTo () method allows for a given gradient opacity (a value between 0 and 1).

grammar:

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

speed parameters required length of time specified effect. It may take the following values: "slow", "fast", or milliseconds.

opacity parameters fadeTo () method required will fade effect to the given opacity (a value between 0 and 1).

The optional callback parameter is the name of the function after the completion of the function performed.

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

Examples

$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});

try it"