jQuery的延迟执行

今天做公司网站的时候,使用了jQuery做sidebar导航条的效果,其实这个效果很简单,就是鼠标至上去平缓向右移动的效果,效果图如下

做出这样的效果并不难,我遇到的问题是,鼠标飘过去(无意滑过)的时候,也会触发效果,还有,鼠标如果来回移动的话,导航文字会一直执行动画,直到执行完鼠标来回移动的次数!

其实这并不是我们想要的效果,这里需要用到一个延迟执行的命令。

jQuery有一个delay()的方法,这个方法可以延迟执行动画效果,但是并不能完成我们想要的效果,因为这个命令只能延迟,不能把无意的滑动取消,话句话说,还是会执行动画。

所以我使用了setTimeout,然后在再使用clearTimeout清除!


$(document).ready(function(e) {
var delayTime = [ ];
$("#intro .sidebar li:has('a')").each(function(index){
$(this).hover(function(){
var _self = this;
delayTime[index] = setTimeout(function(){
$(_self).children("a").animate({paddingLeft:"20px"},200)//这样的选择器是我的HTML结构所需,和大家的可能都不一样。
},100)
},function() {
var _self = this;
clearTimeout(delayTime[index]);//这里是关键,要清除效果
$(_self).children("a").animate({paddingLeft:"10px"},200)
})
})
});

原文链接:,转发请注明来源!

发表评论