转：遇到jQuery 中的 slideUp ，slideToggle和 slideDown 动画重复执行

关注

原创最新推荐文章于 2026-08-01 09:20:49 发布 2.2k 阅读 AI 写同款· GEO 优化 ›

jQuery动画原理与工业级实战：兼容性、队列控制与边缘场景优化 jQuery动画本质上是JavaScript驱动的DOM属性插值系统，通过定时器逐帧修改内联样式实现跨浏览器一致行为。其核心价值在于内置的兼容性兜底（如IE opacity降级）、声明式队列管理（FIFO链式执行）和高度可调试性（step回调、帧级监控）。在低配设备、离线环境或遗留系统中，它比CSS transition或现代框架动画更可控、更稳定。本文深入解析show/fade/slide三类函数的行为逻辑、animate()的7种参数写法、stop()/finish()的战场级控制策略，并结合银行终端等阅读详情

jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.

如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观演示页面中有一个按钮, 请用鼠标迅速地来回划过…

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

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