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

好的家伙，不要再尝试了，我已经找到了解决方案。无论谁有兴趣，我如何解决它，这里是解决方案：

在CSS中，使.back元素始终可见，因此请找到此行&.do-flip {并添加此样式.back { display: block !important; }
在jQuery中，没有必要拥有back.removeAttr('style');，这也确实混淆了不透明风格（淡化效果）
现在包裹每个＆＃34;垫＆＃34;与父母，例如.pad-container，并给他准确的大小.pad s，现在我们将与他一起操纵
每个函数都会使用这些包装器，而不是＆＃34; pad＆＃34;，所以在jQuery中$('.pexeso .pad-container').each(function() {...
在此包装器上绑定事件mouseenter和mouseleave，但更改的类仍保留在＆＃34; pad＆＃34;和fadeOut对后面元素的影响。另外，在.show()之前将函数fadeOut添加到此后退元素。

这就是全部。这是更新版本：UPDATED DEMO

使用CSS + jQuery对悬停进行翻转效果，对模糊进行淡化

1 个答案: