Define fadeOut() method in jQuery.

The fadeOut() method fades out the visible elements of a website, for example <div>, <p> etc. that may contain the text, images or other content.

The fadeOut method slowly changes the opacity of the given element from visible to hidden.

Syntax of jQuery fadeOut()

Following is the syntax of fadeOut method:
$(selector).fadeOut(speed,callback);
Where:
Selector = is an element, for example, a paragraph, a div etc.
Speed = This is where you can define the speed of fading out. The values can be:
“slow”
“fast”
Or value in milliseconds
Callback = after fadeOut() method is completed, an optional callback function.

An example of fadeOut() method

Following example shows how to use the fadeOut method. In this example, as you click “FadeOut jQuery” button it will hide (fade out) three visible blocks with fast, slow and 3000 milliseconds speed.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#fadebutton").click(function(){
    $("#orangeblock").fadeOut("fast");
    $("#cyanblock").fadeOut("slow");
    $("#blackblock").fadeOut("3000");
  });
});
</script>
   <style>
      .blackblock {
        width:200px;
        height:200px;
        background-color:black;
        }
      .cyanblock {
        width:200px;
        height:200px;
        background-color:cyan;
        }
      .orangeblock {
        width:200px;
        height:200px;
        background-color:orange;
        }       
  </style>
</head>
<body>
<button id="fadebutton">FadeOut</button>
<br>
<div id="blackblock" class="blackblock"></div>
<div id="cyanblock" class="cyanblock"></div>
<div id="orangeblock" class="orangeblock"></div>
</body>
</html>
<!DOCTYPE html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
  $("#fadebutton").click(function(){ 
    $("#orangeblock").fadeOut("fast"); 
    $("#cyanblock").fadeOut("slow"); 
    $("#blackblock").fadeOut("3000"); 
  }); 
}); 
</script> 
   <style> 
      .blackblock { 
        width:200px; 
        height:200px; 
        background-color:black;
         }
       .cyanblock {
         width:200px;
         height:200px;
         background-color:cyan;
         }
       .orangeblock { 
        width:200px; 
        height:200px; 
        background-color:orange; 
        }        
  </style> 
</head> 
<body> 
<button id="fadebutton">FadeOut</button> 
<br> 
<div id="blackblock" class="blackblock"></div> 
<div id="cyanblock" class="cyanblock"></div> 
<div id="orangeblock" class="orangeblock"></div> 
</body> 
</html>

Need Help? Contact Us.

Log in

*
*

Forgot password?

*

New User

*
*
*
*