javascript - 动画一个 - 停止另一个 |查询

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 fiddle : JS Fiddle redirect

对不起，那丑陋的悬停背景颜色......我不知道我做错了什么......似乎一切都错了!任何解决方案表示赞赏。谢谢。

编辑:似乎我也在每次悬停时附加该跨度，即使它已经附加到列表项。天啊……

Answer 1

发生这种情况是因为两个跨度仍然具有 active 类。 mouseleave 先出现，但 mouseenter 在两个 跨度上触发 .stop().slideDown()。

有几种可能的解决方案，但我认为一个是只在跨度上使用 .removeClass('active')(可能添加另一个具有相同样式的类)。这将导致它一直向上滑动，而真正的事件跨度向下滑动:

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