0

我有一个 jquery 动画，它是由父级 () 上的 mouseenter 触发的，但是如果用户“摆动”子级 () 上的鼠标，则动画会闪烁，就好像它在 mouseout 和 mouseenter 之间切换一样。

在父级上调用 mouseenter。为什么它也会附着在孩子身上，我可以防止这种情况发生吗？

例子：

http://jsfiddle.net/uqgz9/

我调查了 .stopImmediatePropagation(); 和 .stopPropagation(); 我认为这可能是正确的方向，但不能完全得到我需要的互动。

谢谢。

4

3 回答 3

2

使用.mouseleave()代替.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'});
    });
});

“mouseleave 事件与 mouseout 处理事件冒泡的方式不同。如果在此示例中使用 mouseout，则当鼠标指针移出 Inner 元素时，将触发处理程序。这通常是不受欢迎的行为。mouseleave 事件另一方面，只有当鼠标离开它所绑定的元素而不是后代元素时才会触发它的处理程序。所以在这个例子中，当鼠标离开外部元素而不是内部元素时触发处理程序。” -jQuery 文档

于 2012-08-05T23:51:21.113 回答
0

如果将此代码添加到事件中，如果目标元素不是选择器的一部分，它将停止事件：

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

演示：http: //jsfiddle.net/uqgz9/3/

该事件仍然会触发，因为鼠标越过父元素的边框，这会很快触发该事件。

于 2012-08-05T23:49:42.697 回答
0

@nbrooks 在接受的答案中所说的内容以及代码将简化如下：

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

演示

在 IE9 和 Opera 12.01 中测试

于 2012-08-06T00:48:24.987 回答