jQuery FadeOut Animation Method

jQuery FadeOut Animation Method

jQuery fadeOut animation effect method; In this tutorial, you will learn what is jQuery fadeout animation effect method and how to use this method with HTML elements.

jQuery FadeOut Animation 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 of jQuery FadeOut Animation Method

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

Parameters of jQuery FadeOut Animation 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 of jQuery FadeOut Animation Method

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.

Example of jQuery FadeOut Animation Method with Callback

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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