为什么当鼠标离开时 jQuery 会在元素上触发鼠标悬停？

Question

示例页面： http://workshop.grdev.co.nz/mousetime

有五个 div，其中应该响应鼠标悬停。

当展开动画开始时，开关 (hoverDemo.doAnim) 设置为 false。这是为了防止在放置鼠标时重复触发动画，以便动画在展开两个相邻 div 之间交替。有趣，但不是我们想要的。

hoverDemo = {

  doAnim: true,
  animDelay: 250,
  marginBottom: 20,
  marginTop: 50, // provides space for h2
  heightContracted: 100,

  init: function() {
    $('.outer .inner').each( hoverDemo.contractDiv );
    $('.outer .inner').mouseover( hoverDemo.expandDiv );    
  },

  expandDiv: function() {
    $('#debug-last').html(this.id);   
    if ( hoverDemo.doAnim ) {
      hoverDemo.doAnim = false ;
      $('#debug-ignore').html('IGNORING MOUSE');
      $('.outer .inner').removeClass('expanded');
      $(this).addClass('expanded');
      var those = $('.outer .inner').not('.expanded');
      $(this).animate( { height: $(this).find('p').height()+hoverDemo.marginBottom+hoverDemo.marginTop }, hoverDemo.animDelay, function() {
        hoverDemo.doAnim = true ;
        $('#debug-ignore').html('');
        those.each( hoverDemo.contractDiv );
      } );
    }
  },

  contractDiv: function() {
    $(this).animate( { height: hoverDemo.heightContracted }, hoverDemo.animDelay );
  }
} ;
$(document).ready(hoverDemo.init);

当鼠标从 Lorem 移动到 Praesent 时，当鼠标离开 Lorem div.inner 时，JS 函数hoverDemo.expandDiv 被触发......我不确定为什么会发生这种情况。

您可以通过将鼠标移动到 Lorem 中，等待 IGNORING MOUSE 消息消失，然后慢慢将其移出展开的 Lorem div 来观察这一情况。

如果将鼠标移动到两侧，它不会触发相同的功能 - 仅当向下移动时。

如果将鼠标从一个 div 向下移动到另一个 div，通常第二个 div 不会展开。根据鼠标速度和动画时间，您可能会看到所有其他 div 都被展开，等等。

问题：

当鼠标刚刚离开展开的 div 时，这段代码会导致 mouseover 事件触发，为什么它只在鼠标通过底部边缘离开时才会发生？

使当前悬停的块展开并同时防止反弹效果的最佳方法是什么？

演示使用 jQuery 1.2.6，因为这是该网站当前使用的 jQuery 版本。

在 OSX Chrome、Firefox、Safari 中观察到的行为。

Answer 1

看起来解决方案（或者，一个好的解决方案）是使用hoverIntent插件。

添加这个几乎使它的行为如我所希望的那样。它没有回答我的问题，但它确实解决了问题:)

插件： http ://cherne.net/brian/resources/jquery.hoverIntent.html

更新代码：http: //workshop.grdev.co.nz/mouseintent

hoverDemo = {

  doAnim: true,
  animDelay: 250,
  marginBottom: 20,
  marginTop: 50, // provides space for h2
  heightContracted: 100,

  init: function() {
    $('.outer .inner').each( hoverDemo.contractDiv );
    $('.outer .inner').hoverIntent( hoverDemo.expandDiv, hoverDemo.contractDiv );    
  },

  expandDiv: function() {
   $(this).animate( { height: $(this).find('p').height()+hoverDemo.marginBottom+hoverDemo.marginTop }, hoverDemo.animDelay );
  },

  contractDiv: function() {
    $(this).animate( { height: hoverDemo.heightContracted }, hoverDemo.animDelay );
  }
} ;
$(document).ready(hoverDemo.init);