Question

我通过在mouseover和mouseout上添加和删除元素类来实现一些动画。我正在使用这种方法，因为我发现单独使用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>

这样可行，但有时候类'hover'不会被移除，它会停留，使元素处于动画状态。知道如何让这更可靠吗？

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 Demo

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

1 个答案: