jQuery 可以通過調用
animate方法添加動畫效果, 而且還提供了一套別名, 使用起來很是方便. 其中slideDown和slideUp兩方法的作用是縱向展開和卷起一個頁面元素, 被使用的幾率很高, 卻一直存在一個小問題.如果目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯后的反復執行, 相當不美觀 演示頁面中有一個按鈕, 請用鼠標迅速地來回划過...
如果用 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);
}
);
});
});