Jquery $('#div').show().delay(5000).hide(); doesn't work

Question

I'm trying to show a div thats set to display: none; for 5 seconds with

$('#div').show().delay(5000).hide();

but it deson't work, it just goes straight to hide()

Can any of you help me?

Answer 1

Do it like this:

$('#div').show(0).delay(5000).hide(0);

By passing in numbers to .show() and .hide(), jQuery will take those methods into its internal fx queue (even if the number is zero). Since .delay() only works within a queue, you need that little workaround.

example: http://jsfiddle.net/zceKN/

Answer 2

You need to use .queue() because .hide() isn't queued by default.

$("#div").show().delay(5000).queue(function (next) {
    $(this).hide();
    next();
});

Answer 3

You need a duration on your hide for it to work:

$('#div').show('slow').delay(5000).hide('slow');

Example: http://jsfiddle.net/Paulpro/GLTaB/

Answer 4

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

.delay() works for animations only