1

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

这是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 小提琴重定向

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

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

4

3 回答 3

1

发生这种情况是因为两个 span 仍然有 class active。首先mouseleave发生，但会在两个跨度上mouseenter触发。.stop().slideDown()

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

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

于 2013-02-04T14:40:54.647 回答
1

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

见演示。

$(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();
            });
        }
    });
});
于 2013-02-04T14:44:46.960 回答
0

我想更换

$('span.active').stop()

和

$(this).find('span.active').stop()

可以帮助你。

于 2013-02-04T14:47:06.550 回答