Fadeout div element require to use the jQuery fadeout method to apply animation effect. The fadeout effect apply to the div element hide the div element when you click the button element.

How to Fadeout Div Element On Button Click Using jQuery

You have to use the jQuery fadeout() create your fadeout effect using jQuery. The example contains the div element with the class to access using the jQuery selectors.

Example of jQuery fadeOut()

Output

This is the content to show the effect of fadeout.


The above example fadeout a Div element when you click the given button above. The fadeout effect performs immediately on click of the button. However, if you want to perform effect on a certain time duration, read further with the given example.

How to Fadeout Div Element on Certain Time Duration using jQuery

The below example contains the content same as the above given example. The only difference is the 5 second delay to perform the fadeout effect. To apply 5 second duration, you have to pass the speed and the argument of the fadeOut().
Example of jQuery fadeOut() in 5 seconds

Output

This is the content to show the effect of fadeout.


Click the above button and the fade effect start 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 jQuery fading effect page.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.