Question

我创建了一些jQuery，它应该执行以下操作：当您将鼠标悬停在div内时，其内容将设置为左侧或顶部的动画，然后在mouseout上它将返回到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>

Answer 1

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

考虑到浏览器不是动画渲染引擎。 Firefox比Chrome更慢。因此，即使你能够在Chrome中顺利运行你的动画，也不能保证它在其他浏览器或较慢的机器上顺利运行。

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

我已经分叉了你的代码。我的代码基本上淡出微笑的div，同时它已经恢复到原来的位置。我看起来更顺畅。但我不确定这种效果是否符合您的要求。

链接：My fork on jsFiddle。

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

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

1 个答案: