我不知道我做错了什么,但没有什么是正确的。 基本上它工作得很好,但如果我将鼠标悬停在另一个列表项上,它会开始动画,而前一个仍然存在。
这是 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
对不起,那丑陋的悬停背景颜色...... 我不知道我做错了什么......似乎一切都错了! 任何解决方案表示赞赏。谢谢。
编辑: 似乎我也在每次悬停时附加该跨度,即使它已经附加到列表项。天啊……
最佳答案
发生这种情况是因为两个跨度仍然具有 active
类。 mouseleave
先出现,但 mouseenter
在两个 跨度上触发 .stop().slideDown()
。
有几种可能的解决方案,但我认为一个是只在跨度上使用 .removeClass('active')
(可能添加另一个具有相同样式的类)。这将导致它一直向上滑动,而真正的事件跨度向下滑动:
关于javascript - 动画一个 - 停止另一个 |查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14688971/