Fading in jQuery Effects


Fading methods are used to adjust the opacity of elements. There are four methods in jQuery Fading Effects.

  • fadeIn() - method used to display the elements by addition the opaque.
  • fadeOut() - method used to hide the elements by addition the transparent.
  • fadeTo() - method used to change the opacity of elements.
  • fadeToggle() - method used to hide and show the elements by changing their opacity.

fadeIn() Method

The following example shows, how to use the fadeIn() method with different parameters.

fadeIn() 
$(document).ready(function(){
  $("#box").fadeIn();
  $("#box").fadeIn('slow');
  $("#box").fadeIn(5000);
});
Example 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='FadeIn' id='btn'> <br><br>
    <div style='width:100px; height:100px; background:green;display:none;' id='box'></div>

  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#box").fadeIn();
      });
    });
  </script>
  </body>
</html>
Try it Yourself

Demo

fadeOut() Method

The following example shows, how to use the fadeOut() method with different parameters.

fadeOut() 
$(document).ready(function(){
  $("#box").fadeOut();
  $("#box").fadeOut('slow');
  $("#box").fadeOut(5000);
});
Example 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='FadeOut' id='btn'> <br><br>
    <div style='width:80px; height:80px; background:green;' id='box'></div>

  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#box").fadeOut();
      });
    });
  </script>
  </body>
</html>
Try it Yourself

Demo

fadeToggle() Method

The following example shows, how to use the fadeToggle() method with different parameters.

fadeToggle() 
$(document).ready(function(){
  $("#box").fadeToggle();
  $("#box").fadeToggle('slow');
  $("#box").fadeToggle(5000);
});
Example 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='FadeToggle' id='btn'> <br><br>
    <div style='width:80px; height:80px; background:green;' id='box'></div>

  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#box").fadeToggle();
      });
    });
  </script>
  </body>
</html>
Try it Yourself

Demo

fadeTo() Method

The following example shows, how to use the fadeTo() method with different parameters.

fadeTo() 
$("#btn").click(function(){
  $("#box").fadeTo('slow',0.6);
  $("#box").fadeTo(5000,0.1);
});
Example 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
  </head>
  <body>
    <input type='button' value='FadeTo' id='btn'> <br><br>
    <div style='width:80px; height:80px; background:green;' id='box'></div>

  <script>
    $(document).ready(function(){
      $("#btn").click(function(){
        $("#box").fadeTo(1000,0.6);
      });
    });
  </script>
  </body>
</html>
Try it Yourself

Demo