jQuery在懸停錯誤上上下滑動

Question

我有一個大div，里面有一個小div。 較小的div首先顯示為隱藏。 當用戶將鼠標懸停在較大的容器div上時，較小的div將使用顯示/隱藏功能進行動畫處理。 到目前為止，一切正常。

然而。 較小的div從底部開始進行動畫處理-因此，如果我將光標懸停在最底部的容器上，則它會在滑入時在較小的div動畫上懸停。因此，現在光標正在懸停在較小的div上較大div的，從而觸發較小div的隱藏功能。 當較小的div滑入和滑出光標指向的位置時，這將導致顯示/隱藏調用無限循環。

有什么想法如何避免這種情況並且在較小的div進入時不破壞容器的懸停？

這就是我的意思：

替代文字http://archivedworks.com/fileserver/jQuery_hover_showhide.jpg

Answer 1

您可以這樣做：

$("#outerDiv").hover(function() {
  $("#innerDiv:hidden").slideDown(); //your show code
}, function() {
  $("#innerDiv:visible").slideUp(); //your show code
});

如果隱藏動畫是可見的（ :visible ），則僅將其排隊；如果:hidden動畫（ :hidden ）不:visible ，則僅將其進行排隊，以防止出現隊列/循環行為。

Answer 2

$('#idOfLargeDiv').hover(
    function() {
        $('#idOfSmallDiv').slideDown();
    }, 
    function() {
        $('#idOfSmallDiv').slideUp();
    }
);