爲什麼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);