使用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 样式设置。

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/150340.html

(0)
上一篇 2021年9月13日
下一篇 2021年9月13日

相关推荐

发表回复

登录后才能评论