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

我创建了一些jQuery，它应该执行以下操作：当您将鼠标悬停在

div

中时，它的内容将向左或向上移动，然后在鼠标移出时，它将返回到0px并淡出

我能做到，但当它到达mouseout时，运行并不平稳

这是我的小提琴：

这是我的密码：

$(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>

反应敏捷的
看法

---

​

这似乎是由于

.button

背景色-绿色-和图像背景色-白色-之间的对比造成的视觉效果

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

请尝试将

.按钮的
背景色更改为白色。您会注意到动画似乎更平滑

我已经把你的密码分岔了。我的代码基本上会在微笑div返回到其原始位置时将其淡出。我的眼睛看起来更光滑。但我不确定这种效果是否是你想要的

链接：

PD.：我添加了一个
指针事件：无类的CSS规则。此规则可避免动画元素在鼠标指针下方移动时中止动画。
在Chrome上运行平稳。你用的是什么浏览器？@ChristopherRamírez:我用的是Chrome浏览器；我看到了问题，但这是一个微妙的问题。微笑的div似乎在消失之前跳了起来。