Question

这是一个使用绝对定位和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错误吗？我是否遗漏了导致浏览器重绘负载的绝对定位？如果有些人可以尝试上面的代码并进行思考，那将是非常感激的....即使只是为了让我放心，我也不会发疯：）

Answer 1

为什么使用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>

Working DEMO

更新（来自jQuery1.6）

更流畅的动画

另外jQuery现在正在使用   新的requestAnimationFrame方法   由浏览器提供，以使我们的   动画更加流畅。我们可以用   此功能可避免调用   定时器，而取决于   浏览器提供尽可能好的   动画体验。

.promise()

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

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

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

快乐帮助：）

JQuery'Choppy'动画 - 简单的测试用例

1 个答案:

CSS

HTML（指定一些id）

的jQuery

Working DEMO

更新（来自jQuery1.6）