jQuery动画在一段时间后中断

Question

当我停留在div中时，如果我又一次又一次地进入动画，动画将不再起作用。因此，就像当我退出动画并再次返回其中时，当我在动画播放过程中待在现场时一样，它不会重新开始动画。

HTML：

<div class="ani-bounce-slow" style="height: 200px; width: 50%; background-color: #3c3; ">
    <p> This is a bouncing Text!</p>
</div>

CSS：

.bounce-slow {
animation: bounce 3s;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

jQuery的：

$(document).ready(function () {
$('.ani-bounce-slow').mouseenter(function () {
    $(this).addClass('bounce-slow');
});
$('.ani-bounce-slow').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
    function (e) {
        $(this).removeClass('bounce-slow');
    }
);
});

在这里摆弄

Answer 1

我认为您的问题是您使用的是one（）函数而不是on（） ：

更改：

$('.ani-bounce-slow').one('webkitAnimationEnd...

至：

$('.ani-bounce-slow').on('webkitAnimationEnd...

.one（事件[，数据]，处理程序）
将处理程序附加到元素的事件。 每个事件类型的每个元素最多只能执行一次处理程序。

.on（事件[，选择器] [，数据]，处理程序）
将一个或多个事件的事件处理函数附加到所选元素。

Answer 2

看起来您只需要退出课程以在休假时停止动画，然后在回车时将其重新添加即可。 这将使动画每次都发生。

$('.ani-bounce-slow').mouseenter(function () {
    $(this).addClass('bounce-slow');
});
$('.ani-bounce-slow').mouseleave(function () {
    $(this).removeClass('bounce-slow');
});

如果希望动画在鼠标离开时继续播放，则需要检查动画是否完成，或者设置一个计时器确定动画的播放时间。