You can fade elements in and out of visibility in jQuery using jQuery fading methods. This fading methods will gradually adjust the opacity of elements. Therefore, in this section we are going to see how to use fade elements using jQuery.

Just like other jQuery effects method, you can additionally specify the duration parmeter for fading methods to control the animation. And that duration parameter can be specified either using string (slow or fast) or in a number of milliseconds.

jQuery has the below fade methods, let’s see one by one:

fadeIn() Method

Here, the jQuery fadeIn() method is to fade in hidden elements.

Syntax for fadeIn()

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

$(“button”).click(function(){

$(“#div1”).fadeIn();

$(“#div2”).fadeIn(“slow”);

$(“#div3”).fadeIn(3000);

});

The above example shows how fadeIn() works with different parameters.The optional callback parameter is a function that has to be executed once the fading completes.

fadeOut() Method

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

Syntax for fadeOut()
$(selector).fadeOut(speed,callback);
Example: fadeIn()
$(“button”).click(function(){

$(“#div1”).fadeOut();

$(“#div2”).fadeOut(“fast”);

$(“#div3”).fadeOut(2000);

});

jQuery fadeToggle() Method

This method will toggles between the fadeIn() and fadeOut() methods. Suppose, the elements are faded out, fadeToggle() method will fade it in and viceversa.

Syntax for fadeToggle()

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

$(“button”).click(function(){

$(“#div1”).fadeToggle();

$(“#div2”).fadeToggle(“slow”);

$(“#div3”).fadeToggle(4000);

});

fadeTo() Method

The method allows fading to a given opacity, value between 0 and 1.

Syntax for fadeTo()

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

$(“button”).click(function(){

$(“#div1”).fadeTo(“slow”, 0.15);

$(“#div2”).fadeTo(“slow”, 0.4);

$(“#div3”).fadeTo(“slow”, 0.7);

});

Leave a Reply

Your email address will not be published. Required fields are marked *