Jim*_*ing 6 jquery animation css-position jquery-animate
这是一个使用绝对定位和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错误吗？我是否遗漏了导致浏览器重绘负载的绝对定位？如果有些人可以尝试上面的代码并进行思考,那将是非常感激....即使它只是让我放心,我不会生气:)
onclick="slide()"如果您想在单击按钮时滑动然后执行以下操作，为什么要使用
#box {\n position: absolute;\n width: 120px;\n height: 100px;\n background: #ff0000;\n left: 500px;\n}\n<button id="slide">slide</button>\n<div id="box">whetever</div>\n<script type=\'text/javascript\'>\n$(document).ready(function (){\n $(\'button#slide\').click(function(){\n $(\'#box\').animate({\'left\': 0},3000);\n });\n}); \n</script>\n\n\n\n更流畅的动画
\n\n此外，jQuery 现在使用浏览器提供的新 requestAnimationFrame 方法来使我们的动画更加流畅。我们可以使用此功能来避免调用计时器，而依赖浏览器来提供最佳的动画体验。
\n
.promise()\n就像$.ajax()之前一样，$.animate()得到\xe2\x80\x9cdeferred\xe2\x80\x9d。当集合上的所有动画完成时，jQuery 对象现在可以返回一个 Promise 来观察：
$(".elements").fadeOut();\n\n$.when( $(".elements") ).done(function( elements ) {\n // all elements faded out\n});\n很高兴能帮助你 ：）
\n| 归档时间： |
|
| 查看次数： |
4550 次 |
| 最近记录： |