您的位置:首页 > Web前端 > JQuery

jQuery hover延时触发

2016-07-21 16:43 393 查看
jQuery中的hover用起来十分简单,在配合animate,几乎你能想象到的所有超炫的效果都可以实现。可是越炫的效果持续执行的时间就越长。比如,鼠标放在div上面,div就缓缓上升,鼠标移走,div就缓缓下降。当我们的鼠标快速反复的穿过多个这样的div时,哇……闹鬼了,所有的div忽上忽下的无法停下。
其实,出现这种情况,只需要让事件延时一会儿触发就可以了,大约延时0.2秒就刚刚好。下面我贴出个例子,以便忘记的时候查阅:

$('.grow').hover(function(){
var _this = $(this); // 把$(this)对象赋给一个变量
trigger = setTimeout(function(){
_this.animate({height:'150px'},300);// jQuery的setTimeout中不能直接使用$(this)
},200); // 延迟时间0.2秒
}, function(){
clearTimeout(trigger); // 清除上面的延迟触发的事件
$(this).animate({height:'70px'},300);
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery