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

Question

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

有五个div应该对mouseover进行响应。

开关（hoverDemo.doAnim）被设定为假时，扩大动画开始。这是为了防止放置鼠标时动画发射，以便动画在扩展两个相邻的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鼠标移动时，JS功能hoverDemo.expandDiv被触发为鼠标叶的的Lorem div.inner ......和我不确定为什么发生这种情况。

您可以通过鼠标移动到的Lorem，等到忽略鼠标消息消失，然后慢慢向下移动可以从扩大的Lorem DIV的观察这一点。

如果你把鼠标移动到侧面，它不火一样的功能 - 向下移动，只有当。

如果从一个DIV向下移动你的鼠标到另一个，频繁的第二个div不会扩大。根据鼠标速度和动画时间的不同，您可能会看到每个其他div都会展开，等等。

问题：

这个怎么样代码会导致鼠标悬停事件，火灾时，鼠标刚刚离开扩大DIV，和鼠标通过底部边缘留下为什么它只发生？

什么是使当前悬停的块扩展，同时防止反弹影响的最佳方法是什么？

演示用了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);