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
Recommended:-How to Get Element by class, name, id in jQuery
Recommended:-jQuery Events List with Example
Recommended:-jQuery Click() Event Example
Recommended:-jQuery Blur Event Method Example
Recommended:-jQuery Focus () Event Method Example
Recommended:-jQuery Toggle Show Hide div on Click
Recommended:-jQuery Select Event Method
Recommended:-jQuery Get Selected Dropdown Option Value onchange
Recommended:-jQuery Form Submit On Button Click
Recommended:-jQuery Keydown Event Example
Recommended:-jQuery Detect ENTER key pressed
Recommended:-jQuery keyup() Event Method
Recommended:-jQuery MouseEnter Event Method
Recommended:-jQuery Trigger Mouseleave on Element
Recommended:-jQuery Hover Event Trigger Example
Recommended:-jQuery Trigger Mousedown Event Method
Recommended:-jQuery Trigger Mouseup Event Method
Recommended:-jQuery Mouseover & MouseOut Event Method
Recommended:-jQuery Animation Effect Methods