使用CSS + jQuery制作悬停翻转效果，模糊淡出效果

Question

我必须做一些类似于pexeso的事情。当你悬停元素时，它会从前面翻转到后面(它们有不同的文本)，当你的鼠标离开时，它会从后面褪色到前面。这是一个HTML示例，它看起来像:

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

有一些CSS，看起来很好(它在jsFiddle源代码中，附在下面)。处理鼠标的进入和离开:

$('.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');
        });
    });
});

在jsFiddle中有完整的示例:DEMO

试着将任何元素悬停在屏幕的左侧或右侧，效果会很好。但是现在试着从顶部或底部悬停，它会对图形做奇怪的事情，而且，有时它会卡住并且保持不可见。

可能知道这个问题:当你从顶部或底部悬停时，它会开始翻转，当你太慢时，它也会触发事件mouseleave，因为翻转正在进行中，而你实际上处于空白位置。然后它调用第一个函数，然后第二个，很多时间，它卡住了。但我不知道怎么修，你能帮我吗?

Answer 1

好了，伙计们，不要再尝试了，我已经找到了一个解决方案。谁感兴趣，我是如何解决的，这是解决方案:

1. 在CSS中，使.back元素始终可见，因此找到&.do-flip {，并添加.back { display: block !important; }
样式
2. 在jQuery中，没有必要有back.removeAttr('style');，这也扰乱了不透明度样式(褪色效果)
3. 现在将每个"pad"与父元素包裹起来，例如.pad-container并给他精确的.pad s大小，现在我们将对他进行操作
4. 每个函数将使用这些包装器，而不是"垫"，所以在jQuery $('.pexeso .pad-container').each(function() {...
5. 将事件mouseenter和mouseleave绑定到此包装器上，但更改类保留在"pads"上，fadeOut影响back元素。同时，将.show()函数添加到fadeOut之前的back元素。

。更新后的DEMO