make div text disappear after 5 seconds using jquery?

Viewed 66035

i need to make a div text disappear after x seconds of displaying it using an ajax call

can you help me on this please ?

thanks

7 Answers

You can use empty() to remove a <div> contents:

setTimeout(fade_out, 5000);

function fade_out() {
  $("#mydiv").fadeOut().empty();
}

assuming:

<div id="mydiv">
  ...
</div>

You can do this with an anonymous function if you prefer:

setTimeout(function() {
  $("#mydiv").fadeOut().empty();
}, 5000);

or even:

var fade_out = function() {
  $("#mydiv").fadeOut().empty();
}

setTimeout(fade_out, 5000);

The latter is sometimes preferred because it pollutes the global namespace less.

$.doTimeout( 5000, function(){ 

 // hide the div
}); 

You would need to set something like setTimeout('$("#id").fadeOut("slow")', 5000) but other than that it depends on what the rest of your code looks like

This should work:

$(document).ready(function() { 
    $.doTimeout(5000, function() { 
        $('#mydiv').fadeOut(); 
    }); 
});

You may need to display div text again after it has disappeared. This can be done in 1 line.

$('#div_id').empty().show().html(message).delay(3000).fadeOut(300);

This Answer is without jQuery, you can just grab your element and know its index position.

Then use it in the div below. I will be your div's index number in dom.

    const div = document.querySelectorAll('div');
    setTimeout(() => {
        div[i].textContent = '';
    }, 3000);
Related