Javascript Ajax jQuery Html PHP Example Quiz New MORE
Need a Website Or Web Application Or Any Help.Contact Us: +91 9437911966 (Whatsapp) Note: Paid Service

jQuery fadeOut() Method With Example


In this example we will discuss How to Fade-In and Fade-Out in jQuery.

 <!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>Fade out boxes</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>  
  	h2 {  
    	color: white;  
        text-align:center;
        padding-top:40px;
  	}  
  </style>  
  <script type="text/javascript">
$(document).ready(function(){
  $("#out").click(function(){
    $("#div").fadeOut("slow");//The required speed parameter values: "slow", "fast", or milliseconds.
  });
});
</script>
</head>  
<body>
<button id="out">fade out boxes</button>
<br>
<br>
<div id="div" style="width:400;height:100px;background-color:green;"><h2 style="color:white;text-align:center;padding-top:40px;">STUDENTS TUTORIAl</h2></div>
 
</body>  
</html>

Run it Yourself »