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

Animate one - Stop another | jQuery

本文关键字：另一个 jQuery 一个 动画      更新时间：2023-09-26

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

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

抱歉悬停背景颜色太难看了。。。我不知道我做错了什么。。。似乎一切都错了！欢迎任何解决方案。非常感谢。

编辑：看起来我还在每一次悬停时都附加了这个跨度，即使它已经附加到了列表项中。哦，天哪。。。

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

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

http://jsfiddle.net/ExplosionPIlls/HL7Aj/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();
            });
        }
    });
});

我认为替换

$（'span.active'）.stop（）

带有

$（this）.find（'span.active'）.stop（）

可能对你有帮助。

相关文章：