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);
});
其实,出现这种情况,只需要让事件延时一会儿触发就可以了,大约延时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);
});
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码