How to use jQuery Fading effects - fadeIn, fadeOut, fadeToggle, fadeTo ?

Fade an element in and out of visibility.

Fade methods are : fadeIn, fadeOut, fadeToggle, fadeTo

fadeIn()

Fades in a hidden element.

SYNTAX

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

speed - specifies the speed of the hiding/showing. Possible values: "slow", "fast", or milliseconds.

callback - function to be executed after the hide() or show() method completes.

Example

$("button").click(function() {

  $("#div1").fadeIn();

  $("#div2").fadeIn("slow");

  $("#div3").fadeIn(3000);

});

fadeOut()

Fade out a visible element.

SYNTAX

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

Example

$("button").click(function() {

  $("#div1").fadeOut();

  $("#div2").fadeOut("slow");

  $("#div3").fadeOut(3000);

});

fadeToggle()

Toggles between the fadeIn() and fadeOut() methods.

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

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

SYNTAX

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

Example

$("button").click(function() {

  $("#div1").fadeToggle();

  $("#div2").fadeToggle("slow");

  $("#div3").fadeToggle(3000);

});

fadeTo()

Fading to a given opacity (value between 0 and 1)

SYNTAX

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

opacity - specifies fading to a given opacity (value between 0 and 1)

Example

$("button").click(function() {

  $("#div1").fadeTo("slow",0.15);

  $("#div2").fadeTo("slow",0.4);

  $("#div3").fadeTo("slow",0.7);

});