24 Nov 2020

How To Fade Out And Remove A Div After Certain Time in jQuery

Here’s a handy bit of code that I use often. Sometime you need to notify user about something and after some time it is needed to be removed. At such time, jQuery’s this snippet is sure shot work. Time after you have to remove is passed in milliseconds. For 1 second, you have to pass 1000. After that time, first fading out occurs followed by removing that from DOM.

jQuery(document).ready(function($){
 setTimeout(function() {
   $('#div-to-remove').fadeOut('slow',function(){
    $('#div-to-remove').remove(); 
   }); 
 }, 5000); 
});  

In this example, the div with id div-to-remove, will be faded out and removed in 5 seconds.

Nilambar

PHP Programmer, WordPress and Laravel Developer, Freelancer and a Blogger.

View all posts by Nilambar →

3 thoughts on “How To Fade Out And Remove A Div After Certain Time in jQuery

  1. but after refreshing the page it'l display again ? how to remove it or hide after a certain time.

    actually i am building a news site. i created a breaking news section called # "prime_news" i want to show it only for few hours after publish the post. like this http://www.firstpost.com/

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.