Question

我有一个大div，里面有一个较小的div。较小的div首先显示为隐藏。当用户将鼠标悬停在大容器div上时，较小的div将使用show / hide-functions进行动画处理。到目前为止一切正常。

然而。较小的div从底部开始动画 - 所以如果我让光标悬停在最底部的容器上，当它滑入时，它会悬停在较小div的动画上。所以现在光标悬停在较小的div上更大的div，从而触发较小的div上的隐藏功能。这会创建一个无限循环的显示/隐藏调用，因为较小的div会滑入和滑出光标指向的位置。

任何想法如何避免这种情况，并且在较小的div进入时不会破坏容器上的悬停？

这就是我的意思：

alt text 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），则只对显示动画进行排队，从而阻止您现在拥有的队列/循环行为。

Answer 2

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

jQuery在悬停bug上向上/向下滑动

2 个答案: