防止jquery重复执行动画

其实很简单, 只需在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题. 例如: 当鼠标滑过按钮后 0.2 秒, 菜单才会展开, 如果鼠标离开按钮, 展开的处理将被终止. 也就是说, 想要展开菜单鼠标必须有 0.2 秒的事件停留在按钮上, 那么迅速地划过按钮是无法执行展开事件的. 卷起也是如此.

下面我们用代码来解决这个问题.

// 线程 IDs 
var mouseover_tid = [];
var mouseout_tid = [];   
jQuery(document).ready(function(){ jQuery('#menus > li').each(function(index){ 
  jQuery(this).hover(
    // 鼠标进入 
   function(){ 
     var _self = this; 
     // 停止卷起事件 
    clearTimeout(mouseout_tid[index]); 
   // 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中 
   mouseover_tid[index] = setTimeout(function() { 
     jQuery(_self).find('ul:eq(0)').slideDown(200); 
  }, 400);
},   
// 鼠标离开 
function(){ 
  var _self = this; 
  // 停止展开事件 
 clearTimeout(mouseover_tid[index]); 
// 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中 
 mouseout_tid[index] = setTimeout(function() { 
   jQuery(_self).find('ul:eq(0)').slideUp(200); 
}, 400); }   ); }); });


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值