jQuery的動畫鼠標懸停/ mouseout保持下拉菜單可見

Question

我試圖做一個基本的下拉菜單與動畫和運行到問題，我似乎無法弄清楚如何保持下拉部分打開，直到鼠標樹葉。有沒有一種簡單的方法可以告訴它保持開放？我知道我對.clickme鼠標移出功能的完全錯誤，因爲它會相應地卸載菜單。

如果任何人都可以在這個具體的例子中提供幫助，我會非常感激。

$(document).ready(function() { 

$('.clickme').mouseover(function() { 
    $('#slidebox').animate({ 
     top: '+=160' 
    }, 200, 'easeOutQuad'); 
}); 

$('.clickme').mouseout(function(){ 
    $('#slidebox').animate({ 
     top: '-=160' 
    }, 200, 'easeOutQuad') 
}); 

}）;

Answer 1

這應該讓你去沒有任何標記的變化：

$('.clickme, #slidebox').hover(function() { 
    $('#slidebox').stop().animate({ top: '30px' }, 200, 'easeOutQuad'); 
}, function() { 
    $('#slidebox').stop().animate({ top: '-130px' }, 200, 'easeOutQuad'); 
}); 

因爲你的元素不是父/子關係，更容易把菜單上的絕對位置（其無論如何，在CSS中有130px），所以沒有理由不使用它具有絕對位置的事實。給它一個鏡頭，我測試你的網站，似乎是我想要在菜單中的行爲。

Answer 2

退房jQuery的hoverIntent