CODEWITHSUNDEEP
jquerydelayslideup
TheBlackBenzKid
TheBlackBenzKid

Reputation: 27105

jQuery How to slideUp with delay?

I am using the following jQuery. A div box slides up, and then after 5 seconds, fades out. Is there a way to achieve this as it takes a long time for the box to appear.

$(document).ready(function() {
  $("#load_limit").slideUp(500); //have tried "fast" also
  $("#load_limit").delay(5000);
  $("#load_limit").slideDown(500);
});

Upvotes: 2

Views: 29642

Answers (4)

anonym
anonym

Reputation: 4850

Find the div, wait for n seconds and then take n milliseconds transition time to slide up.

$("#div").delay(5000).slideUp(1000);

Upvotes: 3

Samich
Samich

Reputation: 30175

You can delay in the callback function:

$(document).ready(function() {
  $("#load_limit").slideUp(500, function() {
     $("#load_limit").delay(5000).slideDown(500);
  }); 
});

or you can just simplified it:

$(document).ready(function() {
  $("#load_limit").slideUp(500)
                  .delay(5000)
                  .slideDown(500);
});

Code: http://jsfiddle.net/xjEy5/2/

Upvotes: 11

Uzbekjon
Uzbekjon

Reputation: 11823

Reduce the time in your .slideUp() to whatever you need. Here is an example:

$("#load_limit").slideUp(50).delay(5000).slideDown(50);

At 50ms you don't really see the .slideUp() effect if your content's height is small. That's why it's better to use .hide() instead.

Upvotes: 0

Kato
Kato

Reputation: 40582

What exactly is wrong with the code you have above? It looks functional (other than you have slideDown/slideUp and no fadeOut as you indicated in the instructions)

Here's an alternative way to achieve the same effect:

jQuery(function($) { // same as $(document).ready() but no conflicts :)

   $('#load_limit').slideDown(500, function() {
      var self = this;
      setTimeout(function() {
         $(self).fadeOut(500);
      }, 5000);
   });

});

Upvotes: 0

Related Questions