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

Fiddle here

Answer 1

我认为您的问题是您使用one()功能而不是on()：

变化：

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

要：

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

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

.on（events [，selector] [，data]，handler）
  将 一个或多个 事件的事件处理函数附加到所选元素。

Answer 2

看起来你只需要撕掉课程就可以在休假时停止播放动画，然后将其添加回输入。这将使动画每次都发生。

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

如果您希望动画在鼠标离开时继续，那么您需要检查动画完成情况，或者为动画应该如何设置计时器。

jQuery动画在一段时间后破裂

2 个答案: