Question

jquery-3.3.1

类va-animated-img添加了css动画。我通过切换课程开始动画。

想法： 1.通过jQuery，我在悬停时添加了类。 2.触发动画后，脚本进入睡眠状态，等待5秒钟。动画就足够了。 3.删除该类。现在一切准备就绪，可以再次捕获鼠标事件。

当我测试缓慢时，一切正常。换句话说，当我将鼠标悬停在div上时，动画开始，我等待动画结束。然后我抽动鼠标，动画又重新开始。

问题。。当我在div上移动鼠标时，动画将无法正常工作。尚未完成。它开始，然后在半秒钟之内停止。我想，我生成了很多悬停事件，然后创建了很多promise。而且，一旦开始制作新的动画，就有可能打破它。

我希望让动画以自然结束的方式结束，如果它开始的话。你可以帮帮我吗？

CSS

.va-animated-img {
    position: relative;
    animation:va-animated-img 5s 1;
    animation-play-state: running;
}

HTML

<div id="animated-img-wrapper"><img id="animated-img" src="img/vacuum_cleaning.webp"/>
    </div>

JavaScript

$( document ).ready(function() {

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    var $animated_img_wrapper = $("#animated-img-wrapper");

    function remove_img_class(animated_img){
        animated_img.removeClass('va-animated-img');
    }

    function add_img_class(){
        var animated_img = $("#animated-img");
        animated_img.addClass('va-animated-img');
        var promise = sleep(5000);
        promise.then(function(){
            remove_img_class(animated_img);
        });
    }
    $animated_img_wrapper.mouseenter(add_img_class);   
});

jQuery添加了一个类来切换动画。动画中断

0 个答案: