Fade Out Animation jQuery

jQuery fadeOut () Animation Method; In this tutorial, i am going to show you what is jQuery fadeOut animation effect method and how to use it with HTML elements.

jQuery fadeOut Animation Effect Method

The fadeOut() method is used for fade out a hide selected html element. This fadeOut () methods to hide HTML elements gradually by decreasing their opacity.

Syntax jQuery fadeOut Animation Effect Method

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

Parameters of jQuery fadeOut Animation Effect Method

  • speed :- The argument ‘speed‘ determines the duration of this effect.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- Ihis is an optional parameter. you can specify what to do after the fadeOut() method is called.

Example 1 – jQuery fadeOut Animation Effect Method

See the jQuery fadeOut animation effect method; as shown below:

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery FadeOut Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#first").fadeOut();  
        $("#second").fadeOut("slow");  
        $("#third").fadeOut(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>You can see the fadeOut() method</p>  
<button>Click here for fade Out</button><br><br>  
<div id="first" style="width:100px;height:100px;background-color:yellow;"></div><br>  
<div id="second" style="width:100px;height:100px;background-color:red;"></div><br>  
<div id="third" style="width:100px;height:100px;background-color:green;"></div>  
</body>  
</html>   

Example 2 – jQuery fadeOut Animation Effect Method with callback

See the jQuery animation fadeout effect with callback; as shown below:

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery FadeOut Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#first").fadeOut();  
        $("#second").fadeOut("slow");  
        $("#third").fadeOut(3000,function(){
        	alert("The fade-out effect is completed.");
        });  
    });  
});  
</script>  
</head>  
<body>  
<p>You can ee the fadeOut() method</p>  
<button>Click here for fade Out</button><br><br>  
<div id="first" style="width:100px;height:100px;background-color:yellow;"></div><br>  
<div id="second" style="width:100px;height:100px;background-color:red;"></div><br>  
<div id="third" style="width:100px;height:100px;background-color:green;"></div>  
</body>  
</html>   

Recommended jQuery Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *