Jquery $('#Div').Show().Delay(5000).Hide(); Doesn't Work

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

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/

jQuery show for 5 seconds then hide

You can use .delay() before an animation, like this:

$("#myElem").show().delay(5000).fadeOut();

If it's not an animation, use setTimeout() directly, like this:

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

You do the second because .hide() wouldn't normally be on the animation (fx) queue without a duration, it's just an instant effect.

Or, another option is to use .delay() and .queue() yourself, like this:

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

Hide will not show after delay and fadeIn()

For your specific code posted above, you are calling "header" tag name element, not id='header' div element. Change your jquery part to

$('#header').show();

Or if you want to do sequence animations. Just put the second animation in the callback function when the first animation is done.
Something like

$("video").fadeOut(2000,function(){
   $("#header").show();
});

Fade Out after .delay() of 5 seconds

Try this: $('#topScroll').hide().delay(5000).fadeIn(400);

Your div is already visible, so you might as well hide it again for fadeIn() to perform.

fadeOut() works because topscroll is already visible. reference: http://api.jquery.com/fadeout/

How to wait 5 seconds with jQuery?

Built in javascript setTimeout.

setTimeout(
  function() 
  {
    //do something special
  }, 5000);

UPDATE: you want to wait since when the page has finished loading, so put that code inside your $(document).ready(...); script.

UPDATE 2: jquery 1.4.0 introduced the .delay method. Check it out. Note that .delay only works with the jQuery effects queues.

Jquery Display Div with Interval

I would use single timeout function as your are hiding at regular intervals. There is one mistake in your code you need to pass the reference of function to setTimeout instead of passing the function call as a string.

Live Demo

window.setTimeout(mytimer,1000);
index = 1;
function mytimer()
{     
     $('#data' + (index++)).hide();
     if(index <= 4) window.setTimeout(mytimer,1000);
}

How do you pause before fading an element out using jQuery?

The new delay() function in jQuery 1.4 should do the trick.

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

Adding a SetTimeout and transition to jQuery Show / Hide

$("#bg_div").hide(0).delay(5000).show(0);
$("#bg_skew").show(0).delay(5000).hide(0);

If you want animations, you can replace the calls to hide() and show() with something appropriate. For example fadeIn() and fadeOut().

---

Related Topics