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

Fiddle here

Answer 1

我认为你的问题是你正在使用 one()函数而不是 on() :

改变:

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

收件人:

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

.one( events [, data ], handler )
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

.on( events [, selector ] [, data ], handler )
Attach an event handler function for one or more events to the selected elements.