javascript - 在悬停时添加/删除类 - 并不总是有效

Question

我正在通过在鼠标悬停和鼠标移出时向元素添加和删除类来实现一些动画。我正在使用这种方法，因为我发现单独使用 CSS 并不可靠；如果鼠标在动画完成之前退出元素，动画将不会完成。

所以我有以下代码:

<div class="one flip-container">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

<script>
    jQuery(".flip-container").hover(function () {
        jQuery(this).addClass("hover");
    },function () {
        jQuery(this).delay(2000).queue(function(){
            jQuery(this).removeClass("hover");
        });
    });
</script>

<style>
    .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

    .flipper {
        transition: 0.6s;
        transform-style: preserve-3d;
        position: relative;
    }
</style>

这行得通，但有时“悬停”类不会被删除，它会保留，使元素处于动画状态。知道如何使它更可靠吗？

Answer 1

尝试使用 mouseenter 然后设置一个超时函数来删除类，这样你就不会添加和删除类，除非每次鼠标进入该区域一次。此外，您可能还想检查该区域是否已经有类以避免函数被执行太多次，如下所示:

jQuery(".flip-container").mouseenter(function () {
    var el = jQuery(this);
    if(!el.hasClass("hover")){
        el.addClass("hover");
        setTimeout(function(){ 
            el.removeClass("hover");
        }, 2000);
    }
});

这是一个工作 fiddle Fiddle Demo