CODEWITHSUNDEEP
javascriptjqueryhidedelayshow
faressoft
faressoft

Reputation: 19651

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

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

Upvotes: 86

Views: 140744

Answers (5)

SJacks
SJacks

Reputation: 438

This info needs updating.

I was looking at this today because I needed to delay the showing of a div. I'm using jQuery 3.4.1 and have tested this.

 $("#mydiv").delay(5000).show(200); // a 5 second delay before the 200 microseconds animation effect from hidden to visible is triggered.

Upvotes: 1

Luciano Damiano
Luciano Damiano

Reputation: 71

The easiest way is to make a "fake show" by using jquery.

element.delay(1000).fadeIn(0); // This will work

Upvotes: 7

abhinav1602
abhinav1602

Reputation: 1290

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);
   });
}

Upvotes: 5

Shakti Singh
Shakti Singh

Reputation: 86346

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.

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

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816364

Pass a duration to show() and hide():

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

E.g. element.delay(1000).show(0)

DEMO

Upvotes: 179

Related Questions