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

回答1:

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/

回答2:

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

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

回答3:

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

});

回答4:

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.

来源：https://stackoverflow.com/questions/9197096/jquery-how-to-slideup-with-delay

标签

jquery

delay

slideup