jQuary Fade : Effect

jQuery Fading Effect :

The english meaning of fade is to grow faint gradually and disappear. In jQuery we can display the matched elements by fading them to opaque and transparent.

No Effect Meaning
1. fadeIn Effect Display the matched elements by fading them to opaque.
2. fadeOut Effect Hide the matched elements by fading them to transparent.
3. fadeToggle Effect Display or hide the matched elements by animating their opacity.
4. fadeTo Effect Adjust the opacity of the matched elements.

A. jQuery fadeIn() Method :

This method is used to make the hidden element to opaque.

Syntax :

$(selector).fadeIn(speed,callback);
Parameter Significance
speed It is defines how long the fade animation will be active.
callback It is parameter function which will be called after the function execution. 
 $("#div1").fadeIn();

above line of code is used to fade in any hidden HTML element having id “div1”

Example :

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn("fast");
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(5000);
  });
});
</script>

Try it Yourself »

B. jQuery fadeOut() Method :

This method is used to fade out the visible element in HTML.

Syntax :

$(selector).fadeOut(speed,callback);
Parameter Significance
speed It is defines how long the fade out animation will be active.
callback It is parameter function which will be called after the function execution. 
 $("#div1").fadeOut();

above line of code is used to fade out the visible HTML element having id “div1”

Example :

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>

Try it Yourself »

C. jQuery fadeToggle() Method :

  1. This method is used to toggle between fadeIn() and fadeOut().
  2. If element is faded out then the fadeToggle() method will fade them in.
  3. If element is faded in then fadeToggle() will fade them out.

Syntax :

$(selector).fadeToggle(speed,callback);
Parameter Significance
speed It is defines how long the fade out animation will be active.
callback It is parameter function which will be called after the function execution. 
 $("#div1").fadeToggle();

HTML element having id “div1” is faded out then fadeToggle() method will make fade them in.

Example :

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>

Try it Yourself »

D. jQuery fadeTo() Method :

  1. The jQuery fadeTo() method allows fading to a given opacity
  2. Opacity value should be in between 0 to 1

Syntax :

$(selector).fadeTo(speed,opacity,callback);
Parameter Significance
speed It is defines how long the fade out animation will be active.
opacity Extend to which opacity should be applied to faded element (value between 0 and 1)
callback It is parameter function which will be called after the function execution. 
$("#div1").fadeTo("slow",0.75);

HTML element having id “div1” is faded in and applied 75% opacity

Example :

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.75);
    $("#div2").fadeTo("slow",0.50);
    $("#div3").fadeTo("slow",0.25);
  });
});
</script>

Try it Yourself »