使用jQuery的delay()延迟执行show()和hide()不起效的解决方法

今天使用 jQuery 的 delay() 来延迟执行 hide() ，发现延时不起效，查了一些资料，找到了其中的原因。

首先介绍一下 delay() ：

语法：

delay(duration,[queueName])

概述：

设置一个延时来推迟执行队列中之后的项目。

jQuery 1.4 新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行，也可以用于自定义队列。

参数：

duration 延时时间，单位：毫秒

queueName 队列名词，默认是Fx，动画队列。

示例：

在 .slideUp() 和 .fadeIn() 之间延时800毫秒。

HTML 代码：

<div id="foo" />

jQuery 代码:

$('#foo').slideUp(300).delay(800).fadeIn(400);

但是使用他来延迟执行 show(） 和 hide() 却不起效：

HTML：

<div id='test' style="display:none">test</div>

jQuery :

$("#test").delay(5000).show();  //延迟5秒来现在id为test的div

上边的代码无效，必须得在 show() 中传参数：

$("#test").delay(5000).show(function(){}); //传回调函数
或
$("#test").delay(5000).show(1); //动画的速度 或 fast 或 slow 或 随便写如 xxx

疑惑是为什么必须传参数才能正确执行？同样的 hide() 也如此。

看一下 jQuery文档对 delay() 的解释：

设置一个延时来推迟执行队列中的项目，它既可以推迟动画队列中函数的执行，也可以用于自定义队列。只有在队列中的连续事件可以被延时，因此不带参数的 .show() 和 .hide() 就不会有延时，因为他们没有使用动画队列。也就是说只有 show() 或 hide() 带有参数的时候才能被插入执行队列中。

简单的说，其实 show() 和 hide() 在不加参数的情况下是直接对元素的 display 样式设置。

声明：本文由w3h5原创，转载请注明出处：《使用jQuery的delay()延迟执行show()和hide()不起效的解决方法》 https://cloud.tencent.com/developer/article/1537805