javascript - 使用 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 源代码中，附在下面)。然后使用 jQuery 处理鼠标进入和离开:

$('.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 !重要的; }
2. 在 jQuery 中，没有必要 back.removeAttr('style');，这也弄乱了不透明样式(淡化效果)
3. 现在用父级包裹每个“pad”，例如 .pad-container 并给他精确的大小作为 .pads，现在我们将对他进行操作<
4. 每个函数都将采用这些包装器，而不是“填充器”，因此在 jQuery 中 $('.pexeso .pad-container').each(function() {...
5. 在此包装器上绑定(bind)事件 mouseenter 和 mouseleave，但更改类保留在“pads”上，fadeOut 效果在后退元素上。此外，在 fadeOut 之前将函数 .show() 添加到此后退元素。

就是这样。这是更新版本:UPDATED DEMO