.fadeOut()

Syntax

$(selector).fadeOut([speed,] [easing,] [callback]);

Parameters

duration (optional): A string or number determining how long the animation will run
callback (optional): A function to call once the animation is complete

Return value

The jQuery object, for chaining purposes.

Description

Hide the matched elements by fading them to transparent.

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none.

Durations are given in milliseconds; higher values indicate slower animations. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

If supplied, the callback is fired once the animation is complete.

Examples

Fade out this button

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).fadeOut();
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Fast fade out

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).fadeOut("fast");
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Fade out in milliseconds

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).fadeOut(2000);
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Fade out one second

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                  $("div").text("selected").show().fadeOut(1000); 
        });
    </script>
  </head>
  <body>
    <body>
     <div></div>
    </body>
</html>

Click to view the demo

Slow fade out

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("button").click(function () {
                  $(this).fadeOut("slow");
               });
        });
    </script>
  </head>
  <body>
    <body>
          <div>Click me<button>button</button></div>
    </body>
</html>

Click to view the demo

Animates all paragraphs to fade out, completing the animation within 600 milliseconds.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").click(function () {
              $("p").fadeOut("slow");
            });
        });
    </script>
  </head>
  <body>
    <body>
      <p>fade away.</p>
    </body>
</html>

Click to view the demo