如何在Jquery中使用delay()、show()和hide()方法？

Question

我该如何在Jquery中使用delay()配合show()和hide()函数？

- faressoft

Answer 1

将时间长度传递给 show()和 hide()函数：

当提供时间长度时，.show()变成动画方法。

例如：element.delay(1000).show(0)

演示

- Felix Kling

Answer 2

最简单的方法是使用jQuery创建一个“虚假展示”。

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

- Luciano Damiano

---

这是一个“假”展示，为什么不直接使用.show(0)呢？ - rinogo

Answer 3

为什么不尝试使用 fadeIn() 而不是使用带有延迟的 show()。 我认为你想要做的事情可以用这个方法完成。 这里是 fadeIn 和 FadeOut() 的 jQuery 代码，它还内置了延迟处理的方法。

$(document).ready(function(){
   $('element').click(function(){
      //effects take place in 3000ms
      $('element_to_hide').fadeOut(3000);
      $('element_to_show').fadeIn(3000);
   });
}

- abhinav1602

---

淡入和延迟显示是两个完全不同的事情。 - lcjury

Answer 4

来自jQuery API

.delay()方法是在1.4版本中添加到jQuery中的，它允许我们延迟执行队列中跟随它后面的函数。它可以与标准效果队列或自定义队列一起使用。只有队列中后续的事件会被延迟；例如，这不会延迟不使用效果队列的.show()或.hide()的无参数形式。

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

- Shakti Singh

Answer 5

这些信息需要更新。

我今天在看这个，因为我需要延迟显示一个 div。我正在使用 jQuery 3.4.1 并已经测试过了。

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

- SJacks

---

这个答案是100%正确的，并且已经经过测试。不应该被投票否决。 - SJacks

我猜这是因为人们停止阅读并尝试 $("#mydiv").delay(5000).show();，但这是行不通的。你必须设置任何参数才能让 show 正常工作（例如 $("#mydiv").delay(5000).show(0);），请参见下面的已接受解决方案。 - fseydel