Javascript 使用CSS+jQuery在悬停、模糊时制作翻转效果

我得做点像pexeso的事。当您悬停元素时，它将前后翻转。它们有不同的文本，当您的鼠标不在时，它将从后到前逐渐消失。这是示例HTML，其外观如下：

<div class="pexeso">
    <div class="pad">
        <div class="front">1</div>
        <div class="back">ONE</div>
    </div>
    etc...

以下是JSFIDLE中的完整示例：

尝试将任何元素悬停在屏幕的左侧或右侧，效果会很好。但现在试着从顶部或底部悬停，它会对图形产生奇怪的影响，而且有时它会阻塞并保持不可见

---

可能知道问题所在：当您从顶部或底部悬停时，它将开始翻转，当您速度太慢时，它还会触发事件mouseleave，因为翻转正在进行中，而您实际上处于空白位置。然后它调用第一个函数，然后调用第二个函数，花了很多时间，它被卡住了。但我不知道如何修复它，你能帮我吗？

好了，伙计们，别再尝试了，我已经找到了解决方案。无论谁感兴趣，我是如何解决的，以下是解决方案：

在CSS中，使.back元素始终可见，因此找到这一行&.do flip{并添加此样式。back{display:block！important；} 在jQuery中，不需要back.removeAttr'style'；，这也会影响不透明样式的淡入效果 现在用parent包装每个pad，例如.pad容器，并给他精确的大小作为.pads，现在我们将用他来操作 每个函数将接受这些包装器，而不是pad，因此在jQuery$'.pexeso.pad container'.eachfunction{。。。 在此包装器上绑定事件mouseenter和mouseleave，但更改的类仍保留在pad上，并在back元素上产生淡出效果。此外，在淡出之前向此back元素添加function.show。 仅此而已。以下是更新版本：

$('.pexeso .pad').each(function() {
    var el = $(this);
    var back = el.find('.back');

    el.on('mouseenter', function() {
        back.removeAttr('style');
        el.removeClass('before-fade').addClass('do-flip');
    });

    el.on('mouseleave', function() {
        el.removeClass('do-flip').addClass('before-fade');

        back.stop(true, true).fadeOut(250, function() {
            el.removeClass('before-fade');
        });
    });
});