使用带有淡出效果的 jquery 动画答案

【问题标题】：using jquery animation with fadeout effect使用带有淡出效果的 jquery 动画
【发布时间】：2012-06-16 05:26:37
【问题描述】：

我创建了一些 jQuery，它应该执行以下操作：当您将鼠标悬停在 div 内时，其内容会向左或上移动，然后在鼠标移出时它会回到 0px 并淡出。

我能够做到，但是当鼠标移出时它运行不顺畅。

这是我的代码：

$(document).ready(function() {
    $(".button").hover(function() {
        $(this).find(".le").css("display", "block");
        $(this).find('.h1').animate({
            left: '-300px',
            top: '130px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find('.h2').animate({
            left: '80px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find('.h3').animate({
            top: '130px'
        }, {
            queue: false,
            duration: 500
        });
    },
    function() {
        $(this).find('.h2').animate({
            left: '0px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find('.h3').animate({
            top: '0px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find(".h1").animate({
            left: '0px',
            top: '0'
        }, "normal", function() {
            setTimeout(function() {
                $('.le').fadeOut('fast');
            }, 0, {
                queue: false,
                duration: 500
            });
        });
    });
});

HTML

<div style="background:#98bf21;height:200px;width:200px; margin:0 auto;" class="button">
<div class="h1 le" style="background:#CCCCCC; display:none; position:relative">
<img src="http://b.vimeocdn.com/ps/797/797108_300.jpg" width="300" height="300" border="0" alt="" /></div>
<div class="h2 le" style="background:#FF0000; display:none; position:relative">Responsive</div>
<div class="h3 le" style="background:#00FF00; display:none; position:relative">View</div>

【问题讨论】：

它在 Chrome 上运行流畅。你用的是什么浏览器？
@ChristopherRamírez：我在 Chrome 上；我看到了问题，但它是一个微妙的问题。微笑的 div 似乎在淡出之前跳了起来。

标签： jquery

【解决方案1】：

这似乎是.button背景色-绿色-和图像的背景色-白色-之间的对比造成的视觉效果。

考虑到浏览器不是动画渲染引擎。 Firefox 甚至比 Chrome 还要慢。因此，即使您在 Chrome 中流畅地运行动画，也不能保证它在其他浏览器或速度较慢的机器上也能流畅运行。

请尝试将.button 的background-color 更改为白色。您会注意到动画看起来更流畅。

我已经分叉了你的代码。我的代码基本上淡出微笑的 div 而它返回到原来的位置。我的眼睛看起来更光滑。但我不确定这种效果是不是你想要的。

链接：My fork on jsFiddle。

PD.：我为.le 类添加了pointer-events: none; CSS 规则。此规则可避免动画元素在鼠标指针下方通过时中止动画。

【讨论】：