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