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

如果希望動畫在鼠標離開時繼續播放，則需要檢查動畫是否完成，或者設置一個計時器確定動畫的播放時間。