jQuery 的 slideUp 和 slideDown 下拉捲動問題

標籤：style   http   io   color   ar   os   sp   on   art   

最初公司前端寫了個導覽功能表，滑鼠停留時彈出下拉式功能表，移走滑鼠時收縮下拉式功能表，可就是這個簡單的功能，T！！M！！D！！你屮它屮快了的時候，下拉式功能表就不完整了，就像~~~包莖？？

本來官方提供的方法，會出現這種問題：如果目標元素是被外來事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反覆執行, 相當不美觀 (示範頁面). 示範頁面中有一個按鈕, 請用滑鼠迅速地來回划過...

但是我們的會包莖，對，沒錯。

$(this).find("a").stop().slideUp();

因為多了個stop，會停止掉當前執行的指令碼，如果當前下拉式功能表正在捲動的過程中，那它的樣式（主要是高度）就會被修改，並且一直是被修改的那個高度，再次觸發下拉時，也只有那麼一點點。。。。

所以刪掉了stop方法，增加一個setTimeout，成為下面的完整代碼，效果OK，也不會出現上面示範頁面中的問題。

// 線程 IDs    var mouseover_tid = [];    var mouseout_tid = [];    jQuery(document).ready(function(){        jQuery(".menu .nav li").each(function(index){            jQuery(this).hover(                    // 滑鼠進入                    function(){                        var _self = this;                        // 停止捲起事件                        clearTimeout(mouseout_tid[index]);                        // 當滑鼠進入超過 0.2 秒, 展開菜單, 並記錄到線程 ID 中                        mouseover_tid[index] = setTimeout(function() {                            $(this).find("a").addClass("current");                            jQuery(_self).find(‘.box‘).slideDown(200);                        }, 201);                    },                    // 滑鼠離開                    function(){                        var _self = this;                        // 停止展開事件                        clearTimeout(mouseover_tid[index]);                        // 當滑鼠離開超過 0.2 秒, 捲起菜單, 並記錄到線程 ID 中                        mouseout_tid[index] = setTimeout(function() {                                $(this).find("a").removeClass("current");                                jQuery(_self).find(‘.box‘).slideUp(200);                            }, 201);                    }            );        });    });

jQuery 的 slideUp 和 slideDown 下拉捲動問題