jQuery“卡顿”动画 - 简单测试案例

Question

jQuery“卡顿”动画 - 简单测试案例

jqueryanimationjquery-animatecss-position

6

这是一个使用绝对定位和jQuery实现Div动画的简单测试案例。

<html>
<head>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
    <script type='text/javascript'>
        function slide(){
            $('#box').animate({'left': 0},3000);
        }   
    </script>
</head>
<body>
    <button onclick="slide()">slide</button>
    <div id="box" style="position: absolute; width: 120px; height: 100px; background: #ff0000; left: 500px"></div>
</body>

在Firefox 4（在mac上）中，动画会“撕裂”并且非常卡顿。在Safari和Chrome中情况有所改善，但仍然存在明显的抖动。将问题简化为上述测试用例后，我不确定该怎么办。这是jQuery的一个bug吗？我是否忽略了绝对定位可能导致浏览器重新绘制的某些内容？如果一些人可以尝试上面的代码并思考一下...即使只是让我放心我没有疯掉也会非常感激 :)

- Jim Anning

我创建了一个快速的jsFiddle来复制这个功能：http://jsfiddle.net/3THuW/ 我似乎无法在Windows上的FF4或Chrome 10中实现它的撕裂。 - Alastair Pitts

是的，我也在做同样的事情... 在 OS X 上使用 Chrome 10 渲染效果还不错。可能会有一点卡顿，但这对于 js 来说并不算什么异常情况。 - jcane86

我总是发现Mac上的FF在动画方面表现不佳。似乎在其他浏览器上运行顺畅，但即使是最简单的交叉淡入淡出在Mac上也会跳跃/卡顿。 - niggles

同样的问题。动画至少会在短时间内卡顿一次（ff/mac）。 - kritzikratzi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xkeshav · Accepted Answer

如果你想在点击按钮时滑动，请使用onclick="slide()"，然后执行以下操作：

CSS

#box {
       position: absolute;
       width: 120px;
       height: 100px;
       background: #ff0000;
       left: 500px;
}

HTML（分配一些ID）

<button id="slide">slide</button>
<div id="box">whetever</div>

jQuery

<script type='text/javascript'>
$(document).ready(function (){
    $('button#slide').click(function(){
            $('#box').animate({'left': 0},3000);
        });
});   
</script>

工作演示

更新（来自jQuery1.6）

更流畅的动画

此外，jQuery现在使用浏览器提供的新requestAnimationFrame方法来使我们的动画更加流畅。我们可以利用这个功能来避免调用计时器，而是依赖于浏览器提供最佳的动画体验。

.promise()

就像之前的`$.ajax()`一样，现在的`$.animate()`也被“延迟”了。jQuery对象现在可以返回Promise以观察集合上所有动画何时完成：

$(".elements").fadeOut();

$.when( $(".elements") ).done(function( elements ) {
    // all elements faded out
});

很高兴能帮助你 :)