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

时间:2015-10-08 13:49:48

标签: javascript jquery html css css3

我必须做像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,因为翻转正在进行中,你实际上处于空白区域。然后它调用第一个函数,然后第二个,很多时间它被卡住了。但我不知道如何解决它,你能帮助我吗?

1 个答案:

答案 0 :(得分:0)

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

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