Pourquoi une animation mouseenter est-elle attachée à l'enfant et pas seulement au parent?

Question

J'ai une animation jquery qui est déclenchée par un mouseenter sur le parent() mais si l'utilisateur "wiggles" la souris sur l'enfant() l'animation scintille comme si elle change entre le mouseout et mouseenter.

Le mouseenter est appelé sur le parent. Pourquoi est-ce aussi attaché à l'enfant et puis-je l'empêcher?

exemple:

http://jsfiddle.net/uqgz9/

Je l'ai regardé dans .stopImmediatePropagation(); et .stopPropagation(); Je pense que c'est peut-être la bonne direction, mais je ne peux pas vraiment obtenir l'interaction dont j'ai besoin.

Merci.

Answer 1

Utilisation .mouseleave() au lieu de .mouseout()

http://jsfiddle.net/uqgz9/4/

var imgW; 

$('.brand-box-item').mouseenter(function(){ 
    if($(this).find('img').is(':animated') === false) 
     imgW = $(this).find('img').width();   
    $(this).find('img').stop().animate({'width':'0','margin-left':(imgW/2)+'px'},function(){ 
     $(this).css({'margin-top':'-40px'}); 
     $(this).stop().animate({'width':imgW+'px','margin-left':'0'}); 
    }); 
}); 

$('.brand-box-item').mouseleave(function(){ 
    $(this).find('img').stop().animate({'width':'0','margin-left':(imgW/2)+'px'},function(){ 
     $(this).css({'margin-top':'0'}); 
     $(this).animate({'width':imgW+'px','margin-left':'0'}); 
    }); 
}); 

« L'événement mouseleave diffère de mouseout de la façon dont il gère l'événement bouillonnant. Si mouseout ont été utilisés dans cet exemple, puis lorsque le pointeur de la souris L'événement mouseleave, d'autre part, ne déclenche son gestionnaire que lorsque la souris quitte l'élément auquel elle est liée, et non un descendant. exemple, la poignée er est déclenché lorsque la souris quitte l'élément externe, mais pas l'élément interne. " -jQuery docs

Answer 2

Si vous ajoutez ce code à vos événements, il arrête l'événement si l'élément cible ne fait pas partie du sélecteur:

if (!$(e.target).is(this)) { 
    return false; 
} 

Démo: http://jsfiddle.net/uqgz9/3/

L'événement feux encore parce que la souris passe sur la bordure de l'élément parent, ce qui déclenche l'événement très rapidement.

Answer 3

Que dit @nbrooks dans la réponse acceptée, ainsi que le code simplifiera comme suit:

$('.brand-box-item').on('mouseenter mouseleave', function() { 
    var imgW, 
     $img = $(this).find('img'); 
    if (!$img.is(':animated')) { 
     imgW = $img.width(); 
     $img.stop().animate({ 
      'width': 0, 
      'margin-left': imgW/2 
     }, function() { 
      $img.css({ 
       'margin-top': -40 
      }).stop().animate({ 
       'width': imgW, 
       'margin-left': 0 
      }); 
     }); 
    } 
}); 

DEMO

testé dans IE9 et Opera 12.01