0

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

我能够做到这一点，但它在鼠标悬停时运行不顺畅。

这是我的小提琴：http: //jsfiddle.net/AufTr/

这是我的代码：

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

​</p>

4

1 回答 1

0

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

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

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

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

链接：我在 jsFiddle 上的 fork。

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

于 2012-06-15T20:03:43.373 回答