How to hide a text after 5 sec using jQuery?

Question

How can I hide the #results after 5 secs ? I tried this but it does not work.

$('#results').hide().html(data).fadeIn('slow').delay(5000).hide();

What I had is this one

$('#results').hide().html(data).fadeIn('slow');

Answer 1

Put a duration on your hide() call and it will work like this:

$('#results').hide().html(data).fadeIn('slow').delay(5000).hide(1);

The issue is that hide() without any parameters is just an immediate operation. It doesn't go through the fx queue so therefore, it doesn't come after the .delay(5000). But, if you give a duration to the function like .hide(1), then it becomes an animation and it goes through the fx queue and thus will come after the .delay(5000).

You can see it work here: http://jsfiddle.net/jfriend00/wzbtU/

---

From the jQuery doc for hide():

When a duration is provided, .hide() becomes an animation method.

Answer 2

Do you mean something like:

$('#results').hide().html(data).fadeIn('slow');

setTimeout(function() {
    $('#results').hide();
}, 5000);