How can I use delay() with show() and hide() in Jquery
Solution 1
Pass a duration to show()
and hide()
:
When a duration is provided,
.show()
becomes an animation method.
E.g. element.delay(1000).show(0)
Solution 2
The easiest way is to make a "fake show" by using jquery.
element.delay(1000).fadeIn(0); // This will work
Solution 3
Why don't you try the fadeIn() instead of using a show() with delay(). I think what you are trying to do can be done with this. Here is the jQuery code for fadeIn and FadeOut() which also has inbuilt method for delaying the process.
$(document).ready(function(){
$('element').click(function(){
//effects take place in 3000ms
$('element_to_hide').fadeOut(3000);
$('element_to_show').fadeIn(3000);
});
}
Solution 4
from jquery api
Added to jQuery in 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 the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show()
or .hide()
which do not use the effects queue.
Related videos on Youtube
faressoft
Updated on February 25, 2022Comments
-
faressoft over 2 years
How can I use
delay()
withshow()
andhide()
in Jquery ? -
lcjury about 4 yearsfadeIn and showing something with a delay are two completely different things
-
TommyAutoMagically almost 3 yearsHow is this a "fake" show? And why not just use
.show(0)
? -
SJacks over 2 yearsThis answer is 100% correct and has been tested. It should not be voted down.