Last Updated on September 10, 2022 by Roshan Parihar
Fadeout div element require to use the jQuery fadeOut() method to apply animation effect. The fadeout effect applies to the div element hiding the div element when you click the button.
How to Fadeout Div Element On Button Click Using jQuery
You have to use the jQuery fadeOut() function to create your fadeout effect using jQuery. The example contains the div element with the class to access using the jQuery selectors.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-fadeout").click(function(){ $("#myDiv-fadeout").fadeOut(); }); }); </script> <div id="myDiv-fadeout">This is the content to show the effect of fadeout.</div> <button id="btn-fadeout" class="btn btn-primary">Click me to fade out</button> |
Output
The above example fadeout a Div element when you click the given button above. The fadeout effect performs immediately at the click of a button. However, if you want to perform the jquery effect on a certain time duration, read further with the given example.
Fade Out at Certain Time Duration using jQuery
If you want to perform a fade-out effect with a certain time delay (for example 5 seconds), you have to use the same fadeOut() function and pass the time delay in milliseconds. For 5 seconds, pass 5000 as the argument of the function.
The below example contains the content the same as the above-given example. The only difference is the 5-second delay to perform the fadeout effect after a certain time. To apply a 5-second duration, you have to pass the speed and the argument of the fadeOut().
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-fadeoutTime").click(function(){ $("#myDiv-fadeoutTime").fadeOut(5000); }); }); </script> <div id="myDiv-fadeoutTime">This is the content to show the effect of fadeout.</div> <button id="btn-fadeoutTime" class="btn btn-primary">Click me to fade out</button> |
Output
Click the above button and the fade effect starts in 5 seconds. The function gets the value in milliseconds and you have to pass 5000 as a value to perform the effect in 5 seconds.
If you want to learn more about the fading effect, you should read the jQuery fading effect page.
You May Also Like to Read