jQuery Effects - Fading Example

In this tutorial i will discuss about jQuery effects and the topic is fadeIn() fadeOut() fadeToggle() and fadeTo().

We will see this one after another with an example code. If you don't know how to use jQuery fade then just follow this jquery fade tutorial. I will teach you. 

jQuery has the following fade methods:

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

Read also : jQuery - Hide and Show with Toggle Example

The jQuery fadeIn() method is used to fade in a hidden element.

Example:

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

The jQuery fadeOut() method is used to fade out a visible element.

Example

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

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

Example

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

The jQuery fadeTo() method allows 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);
});

Hope it can help you.