0

我用 jQuery 创建了一个顶栏，当您将鼠标悬停在 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');
    });
});
4

3 回答 3

0

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

于 2013-07-19T19:48:09.350 回答
0

在这种情况下，我所做的是使用:animated 选择器执行以下操作：

$(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');
        }
    });
});

这样，您的动画只会在您的对象当前未设置动画时开始。

于 2013-07-19T19:52:46.330 回答
0

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

首先，您将 jQuery 用于鼠标悬停事件，众所周知，这些事件不能 100% 准确地工作。JavaScript 的mousemove`mouseenter' 等事件太挑剔了。

其次，您正在使用 jQuery 的animate功能。这些动画正在排队。最佳情况下，您将让动画突然停止并重新开始。

唯一真正做到这一点的方法是使用 CSS:hover使您的元素具有动画效果。您不会遇到奇怪的鼠标事件（CSS 的处理:hover比 JavaScript 的要好得多），也不会有动画队列。这一切都在幕后处理，因此您无需担心。我们需要一个 jsFiddle 或其他东西来用 CSS 重新创建动画。 在哪里寻找重新创建动画效果的一个很好的例子。

于 2013-07-19T19:54:23.870 回答