今天使用 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()
和 hi
de()
在不加参数的情况下是直接对元素的 display
样式设置。
原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/150340.html