jQuery如何延迟滑动？答案

【问题标题】：jQuery How to slideUp with delay?jQuery如何延迟滑动？
【发布时间】：2012-02-08 16:11:18
【问题描述】：

我正在使用以下 jQuery。一个 div 框向上滑动，然后在 5 秒后淡出。有没有办法实现这一点，因为盒子需要很长时间才能出现。

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

【问题讨论】：

您希望延迟更短吗？
@TheBlackBenzKid：您发布的代码应该可以正常工作。你有什么问题？
你的代码有什么问题？是不是 div 需要很长时间才能出现，并且 jQuery 在加载之前就已经启动？
@AndrewWhitaker 该框需要很长时间才能出现。 tiny.cc/8x7y1
不，我希望它快速出现..延迟 5 秒...然后快速消失..

标签： jquery delay slideup

【解决方案1】：

你可以在回调函数中延迟：

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

或者你可以简化它：

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

代码：http://jsfiddle.net/xjEy5/2/

【讨论】：

没有理由这样做。 delay 将等待 slideUp 完成。添加额外的 500 毫秒将延迟额外的 500 毫秒。

【解决方案2】：

找到div，等待n秒，然后用n毫秒的过渡时间向上滑动。

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

【讨论】：

【解决方案3】：

您上面的代码到底有什么问题？它看起来很实用（除了您在说明中指出的有 slideDown/slideUp 并且没有淡出）

这是实现相同效果的另一种方法：

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

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

});

【讨论】：

【解决方案4】：

将.slideUp() 中的时间减少到您需要的任何时间。这是一个例子：

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

在 50 毫秒时，如果您的内容高度很小，您不会真正看到 .slideUp() 效果。这就是为什么最好改用.hide()。

【讨论】：

我将如何使用 hide -> 示例？