jQuery Api FadeOut Animation Effect

jQuery fadeOut () Animation Method – how to use this method with html elements . We are going to show you with simple example how to use this animation method. Here you will learn how to fade out selected html elements using jQuery.

jQuery fadeOut Animation Effect

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

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

Parameters of fadeOut 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.

jQuery fadeOut() example

In the below example you can see that fadeOut() method effect.

<!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>   

In this above example fadeout() method, you can see that fadeout() method effect on html elements.

fadeOut() and callback example

<!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>   
Spread the love

Be First to Comment

Leave a Reply

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