With jQuery, we can slowly make objects disappear by fading them, or we can make a hidden object visible by slowly increasing its transparency.

There are 4 different variations of the fade method, and the way they are used is the same both with each other and with the methods we have covered in other subjects:

$(selector).fadeMethod( rate, callbackFunction );

Parameters are optional. To determine the effect speed, a time can be given as slow, fast or in milliseconds. Callback functions were explained in our previous topic.

Let's examine the fade methods:

fadeIn() Method It makes hidden objects visible by increasing their transparency. Example: In the example below, the fadeIn method is used in 3 different ways.

$("#button1").click(function(){
 $("#box1").fadeIn();
 $("#box2").fadeIn("slow");
 $("#box3").fadeIn(3000);
});

fadeOut() Method Allows objects to be hidden by fading.

Example:

$("#button1").click(function(){
 $("#box1").fadeOut();
 $("#box2").fadeOut("slow");
 $("#box3").fadeOut(3000);
});

fadeToggle() Method It makes the object it is connected to fade out if it is visible, and makes it appear if it is hidden.

Example:

$("#button1").click(function(){
 $("#box1").fadeToggle();
 $("#box2").fadeToggle("slow");
 $("#box3").fadeToggle(3000);
});

fadeTo() Method Allows fading objects to the desired transparency. A value between 0 and 1 is given as the degree of transparency.

Example:

$("#button1").click(function(){
 $("#box1").fadeTo(“fast”, 0.3);
 $("#box2").fadeTo("slow",0.6);
 $("#box3").fadeTo(3000, 0.5);
});