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

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),则只对一个show动画进行排队,从而阻止你现在拥有的队列/循环行为.