这是一个使用绝对定位和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>
Run Code Online (Sandbox Code Playgroud)
在Firefox 4(在Mac上)动画"泪流满面"并且非常恶劣.在Safari和Chrome中它更好,但仍然有明显的抖动.
将问题简化为上述测试用例后,我不确定下一步该怎么做.这是一个jQuery错误吗?我是否遗漏了导致浏览器重绘负载的绝对定位?如果有些人可以尝试上面的代码并进行思考,那将是非常感激....即使它只是让我放心,我不会生气:)