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 with Example
The fadeOut() method provides a way to smoothly hide a selected HTML element by gradually reducing its opacity until it’s no longer visible. This creates a fading effect that is often used to enhance the user experience.
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
Recommended:-jQuery | Event MouseUp By Example
Recommended:-Event jQuery Mouseleave By Example
Recommended:-jQuery Event Mouseenter Example
Recommended:-Event jQuery MouseOver & MouseOut By Example
Recommended:-keyup jquery event example
Recommended:-Event jQuery. Blur By Example
Recommended:-jQuery – Remove All Unwanted Whitespace From String
Recommended:-jQuery form submit event with example
Recommended:-keydown function jQuery
Recommended:-List of jQuery Events Handling Methods with examples
Recommended:-Jquery Selector by .class | name | #id | Elements
