jquery鼠标经过延时处理
来源:互联网 发布:google马赛克还原软件 编辑:程序博客网 时间:2024/05/16 00:38
转载:http://www.jiaoben8.cn/Article-id112.html
在jquery实际开发中,我们有时会用到鼠标经过显示隐藏层这样的效果,其实这种效果随处可见,在jquery中有一个hover事件可以完成类是效果,代码很简单,如下:
$(document).ready(function(){
$("选择器").hover(function(){
//鼠标经过需要执行的事件
},function(){
//鼠标离开需要执行的事件
})
虽然代码SO EASY,但是如果你用的是滑上,滑下的这种动画效果的话,鼠标来回滑动,就会出现事件多次响应,那效果,不懂的人还以为是动画片呢,其实这并不是我们想要的结果,况且这对于用户体验也不好,所以我们就引出了延时的概念,原理是,只要在一个时间的范围内,我就响应这个事件,当然这个时间不能太长,不然用户早就离开,还响应的屁呀。。
废话不多说,直接上代码。。
$(document).ready(function(){
var mouseover_tid = [];
var mouseout_tid = [];
$("#nav").hover(function(index){
// 鼠标进入
var _self = this;
// 停止卷起事件
clearTimeout(mouseout_tid[index]);//当鼠标经过的时候,我先停止鼠标离开的动作
// 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中
mouseover_tid[index] = setTimeout(function() {
jQuery(_self).find(".list").slideDown('fast');
}, 400);
},function(index){
var _self = this;
// 停止展开事件
clearTimeout(mouseover_tid[index]);
// 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中
mouseout_tid[index] = setTimeout(function() {
jQuery(_self).find(".list").slideUp('fast');
}, 400);
})
效果请参见http://www.jiaoben8.cn/Specia-id111.html
- jquery鼠标经过延时处理
- jquery鼠标经过延时处理
- jQuery – 鼠标经过(hover)事件的延时处理
- jQuery – 鼠标经过(hover)事件的延时处理
- 【web前端】jQuery – 鼠标经过(hover)事件的延时处理
- jquery鼠标经过效果
- jQuery鼠标经过行高亮
- jquery 鼠标经过放大图片
- jquery 鼠标经过行变色
- Jquery 双色表格,鼠标经过变色
- jquery鼠标经过导航条改变背景图
- jquery鼠标按上或经过事件
- jquery插件之一 鼠标经过插件
- jquery鼠标经过弹出层写法
- jQuery-鼠标经过显示大图并跟随鼠标效果插件
- Jquery 隔行换色,鼠标经过换色
- 鼠标经过表格行时,显示变色、字体放大效果 jquery
- jQuery实现table表格隔行换色鼠标经过变色
- 石剑璧前期linux系统学习总结
- matlab画曲线
- Hibernate 映射xml中的属性类型
- BI 商业智能 SQL Server Reporting Services (SSRS)(转)
- matlab中使用结构体
- jquery鼠标经过延时处理
- 国企,私企与外企利弊通观--关键时刻给应届毕业生及时点拨
- 龚博文linux网络编程前期学习总结
- Linux 内核gpio模拟I2C
- test
- 笑傲江湖中的政治斗争
- 超实用的php清除html,换行,空格类
- POJ 1258
- 每周五工作规划