How to use delay () function with show () and hide () in jQuery

Question

How can I use delay() with show() and hide() in jQuery?

Answer 1

Skip duration to show() and hide() :

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

eg. element.delay(1000).show(0)

Demo

Answer 2

from jquery api

Added to jQuery version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with a standard effects queue or with a custom queue. Only subsequent events in the queue are delayed; for example, this does not delay forms without .show() or .hide() arguments that do not use the effects queue.

http://api.jquery.com/delay/

Answer 3

Why don't you try fadeIn () instead of using show () with delay (). I think what you are trying to do can be done with this. Here is jQuery code for fadeIn and FadeOut (), which also has a built-in process delay method.

 $(document).ready(function(){ $('element').click(function(){ //effects take place in 3000ms $('element_to_hide').fadeOut(3000); $('element_to_show').fadeIn(3000); }); }