jQuery Fading Method

Using jQuery fading method, you can fade elements in and out.
jQuery has a number of fade methods:

•fadeIn() method: used to fade in hidden elements

Syntax:

$(selector).fadeIn(speed,callback);
The speed parameter is optional and it specifies the effect’s duration. It can have values: slow, fast, or milliseconds. The callback parameter is also optional and it specifies the name of the function that you want to execute after the fading finishes.

Ex.
$("button").click(function(){
$("#div").fadeIn("slow");
});

•fadeOut()

This method is used to fade out visible elements.

Syntax:

$(selector).fadeOut(speed,callback);
The speed parameter is optional and it specifies the effect’s duration. It can have values: slow, fast, or milliseconds. The callback parameter is also optional and it specifies the name of the function that you want to execute after the fading finishes.

Ex.
Example
$("button").click(function(){
$("#div").fadeOut(slow);

});

•fadeTo()
This method allows fading to a specific opacity (between 0 and 1).

Syntax:

$(selector).fadeTo(speed,opacity,callback);
The speed parameter is required and it specifies the effects duration, it could be (slow, fast or milliseconds). The opacity parameter is required and it specifies the fading to a given opacity (between 0 and 1).The callback parameter is optional and it is the name of the function you want to execute after the function finishes.

Ex.
$("button").click(function(){
$("#div").fadeTo("fast",0.20);
});

•fadeToggle()
This method is used to toggle between the fadeIn() and fadeOut() methods. If elements are faded out, the fadeToggle() method will fade them in, and if they’re faded in, this method will fade them out.

Syntax:

$(selector).fadeToggle(speed,callback);
The speed parameter is optional and it specifies the effect’s duration. It can have values: slow, fast, or milliseconds. The callback parameter is also optional and it specifies the name of the function that you want to execute after the fading finishes.

Ex.
$("button").click(function(){
$("#div").fadeToggle();
$("#divx").fadeToggle(2000);
});

great thanks my friend Des Guru realy great post

thanks for your post.helpfil for me

thanks very nice

Ótimo post!! Obrigado

I tried it it works great...Many Thanks