jQuery fade

Fade means set visibility of html elements.

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

A. fadeIn():

<style>

#div1, #div2, #div3 {
   height:150px; width:150px;
   display:nones;
}

#div1{
  background:red;
}

#div2{
  background:orange;
}

#div3{
  background:purple;
}

</style>

<br/>
<center>

<button class="btn btn-primary">Fade</button><br/><br/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</center>

fadeIn() function work for showing hide elements.

$("button").click(function(){
$("#div1").fadeIn();  // instant show
$("#div2").fadeIn("slow");  // show slowly
$("#div3").fadeIn(3000);  // show after 3 seconds
});

B. fadeOut():

fadeOut() function work for hide html elements.

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

C. fadeToggle():

It is the combo of fadeIn() & fadeOut().

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

D. fadeTo():

fadeTo() works for setting the quantity of opacity of html elements. Range of opacity between (0, 1).

$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});