Pourquoi jQuery lance-t-il la souris sur un élément lorsque la souris quitte?

Question

Exemple de page: http://workshop.grdev.co.nz/mousetime

Il y a cinq divs qui doivent répondre au passage de la souris.

Un commutateur (hoverDemo.doAnim) est défini sur false lorsque l'animation de développement démarre. Ceci est destiné à éviter que l'animation ne se déclenche à plusieurs reprises lorsque la souris est placée de sorte que l'animation alterne entre l'expansion de deux divs adjacentes. Divertissant, mais pas ce que nous voulons.

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); 

Lorsque la souris se déplace de Lorem à Praesent, la fonction JS hoverDemo.expandDiv est tiré que la souris feuilles le div.inner Lorem ... et je ne suis pas sûr pourquoi cela se passe.

Vous pouvez observer ceci en déplaçant la souris dans Lorem, en attendant que le message IGNORING MOUSE disparaisse, puis en le déplaçant lentement hors de la div Lorem étendue.

Si vous déplacez la souris sur les côtés, la fonction n'est pas la même - uniquement lorsque vous déplacez vers le bas.

Si vous déplacez votre souris d'un div à un autre, il est fréquent que la seconde div ne soit pas étendue. En fonction de la vitesse de la souris et du timing de l'animation, vous pourriez voir tous les autres div se développer, et ainsi de suite.

Questions:

Qu'en est-ce code déclenche l'événement mouseover au feu lorsque la souris est juste de quitter la div élargi, et pourquoi il arrive que comme les feuilles souris via le bord inférieur?

Quelle est la meilleure façon de développer le bloc actuellement plané tout en empêchant les effets de rebond?

Demo utilise jQuery 1.2.6, car il s'agit de la version de jQuery actuellement utilisée sur le site. Comportement observé dans OSX Chrome, Firefox, Safari.

Answer 1

On dirait que la solution (ou, une bonne solution) est d'utiliser le plugin hoverIntent. Ajoutant cela à peu près fait se comporter comme je l'espérais. Il ne répond pas à ma question de savoir pourquoi, mais il ne résout le problème :)

Plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html

Code Mise à jour: 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);