防止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); }   ); }); });