Question

我创建了一个带有jQuery的topbar，当你将鼠标悬停在div上时开始播放，然后当鼠标移出时，另一个动画开始播放。好吧，问题是，当你在div上多次徘徊你的鼠标时，动画会播放几次，它正在重复。我不想要这个！

我试过把它放在jsfiddle或codepen上，两者都不起作用！这是我的代码：

HTML：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://raw.github.com/ai/easings.net/master/vendor/jquery.easing.js"></script>
<div class="bar"></div>

CSS：

.bar {
    background-color: black;
    width: 100%;
    height: 50%;
    position: absolute;
    top: -250px;
    left: 0;
    right: 0;
    border: 1px solid black;
}

JS：

$(document).ready(function() {
    $('.bar').hover(function() {
        $(this).animate({ height: '100%' }, 600, 'easeInBounce');
    }, function() {
        $(this).animate({ height: '50%' }, 600, 'easeOutCirc');
    });
});

Answer 1

尝试使用$(this).finish().animate()。这将停止排队的动画并立即完成。

Answer 2

在这种情况下我做的是使用:animated selector做这样的事情：

$(document).ready(function() {
    $('.bar').hover(function() {
        if (!$(this).is(':animated')) {
            $(this).animate({ height: '100%' }, 600, 'easeInBounce');
        }
    }, function() {
        if (!$(this).is(':animated')) {
            $(this).animate({ height: '50%' }, 600, 'easeOutCirc');
        }
    });
});

这样，只有当您的对象当前未设置动画时，您的动画才会启动。

Answer 3

没有一种方法能够很好地处理这个问题（取决于你想要对动画做些什么）。

首先，您使用jQuery进行鼠标悬停事件，这些事件已知不能100％准确地工作。 JavaScript的mousemove，`mouseenter'等事件太挑剔了。

其次，您正在使用jQuery的animate函数。这些动画正在排队。最好的情况是你会让动画突然停止并重新开始。

这样做的唯一真正方法是使用CSS的:hover来使元素具有动画效果。您不会遇到奇怪的鼠标事件（CSS对:hover的处理比JavaScript更好），也不会有动画队列。这一切都在幕后处理，所以你不必担心它。我们需要一个jsFiddle或者其他东西来用CSS重新创建动画。 A good example在哪里可以重新创建动画效果。

当另一个人正在玩时，不要播放动画

3 个答案: