Why is a mouseenter animation attached to the child and not just the parent?

Question

I have a jquery animation that is triggered by a mouseenter on the parent () but If the user "wiggles" the mouse on the child () the animation flickers as though it is switching between the mouseout and mouseenter.

The mouseenter is called on the parent. Why is it also attached to the child and can I prevent this?

example:

http://jsfiddle.net/uqgz9/

I've looked into .stopImmediatePropagation(); and .stopPropagation(); I think that may be the right direction but can't quite get the interaction I need.

Thanks.

score 2 · Accepted Answer · answered Aug 05 '12 at 23:51

Use .mouseleave() instead of .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'});
    });
});

"The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element." -jQuery docs

perfect! I knew it was something small. The affects of starring at code too long. lol — dcp3450, Aug 06 '12 at 00:24
@dcp3450 no problem. Also, since you really want a handler for hovering, jQuery has a shortcut function for both of these: http://api.jquery.com/hover/ — nbrooks, Aug 06 '12 at 01:08

score 0 · Answer 2 · answered Aug 05 '12 at 23:49

If you add this code to your events, it stops the event if the target element is not a part of the selector:

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

Demo: http://jsfiddle.net/uqgz9/3/

The event still fires because the mouse passes over the border of the parent element, which triggers the event very quickly.

score 0 · Answer 3 · answered Aug 06 '12 at 00:48

What @nbrooks says in the accepted answer, plus the code will simplify as follows :

$('.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

Tested in IE9 and Opera 12.01

Why is a mouseenter animation attached to the child and not just the parent?

3 Answers3