Question

我不知道我做错了什么，但没有什么是正确的。基本上它工作得很好，但如果我将鼠标悬停在另一个列表项上，则会启动动画并保留前一个。

这是JS部分......

$('nav#topMenu li').on('mouseenter mouseleave', function(e) {
    if(e.type === 'mouseenter') {
        $(this).append('<span class="active"></span>');
        $('span.active').stop().slideDown('200');
    } else {
        $('span.active').stop().slideUp('200', function() {
            $(this).remove();
        });
    }
});

这是JS小提琴： JS Fiddle redirect

对不起那个难看的悬停背景颜色...... 虽然我做错了，但我没有任何想法......似乎一切都错了！任何解决方案都很受欢谢谢。

修改看起来我也在每个悬停上附加该跨度，即使它已经附加到列表项。哦，我的......

Answer 1

这是因为两个跨度仍然具有类active。 mouseleave首先出现，mouseenter触发两个跨越.stop().slideDown()。

有几种可能的解决方案，但我认为只需在跨度上使用.removeClass('active')（可能会添加另一个具有相同样式的类）。当真正的活动范围向下滑动时，这将导致它一直向上滑动：

http://jsfiddle.net/ExplosionPIlls/HL7Aj/1/

Answer 2

使用.is(":animated")检查动画是否已完成。由于$('span.active')选择具有active类的所有元素，因此当您跨越元素移动光标时，可以有效地停止所有元素的动画。您应该在这些元素没有执行任何现有动画的情况下对这些元素应用更多动画。

请参阅DEMO。

$(function () {
    $('nav#topMenu li').on('mouseenter mouseleave', function(e) {
        if(e.type === 'mouseenter') {
            $(this).append('<span class="active"></span>');
            $('span.active').each(function() {
                if (!$(this).is(":animated")) {
                    $(this).stop().slideDown('200');
                }
            });
        } else {
            $('span.active').stop().slideUp('200', function() {
                    $(this).remove();
            });
        }
    });
});

Answer 3

我想替换

$（ 'span.active'）。停止（）

带

$（本）.find（ 'span.active'）。停止（）

可以帮到你。

动画一个 - 停止另一个| jQuery的

3 个答案: