JQuery 'Choppy' 动画 - 简单的测试用例
Posted
技术标签:
【中文标题】JQuery \'Choppy\' 动画 - 简单的测试用例【英文标题】：JQuery 'Choppy' animation - simple test caseJQuery 'Choppy' 动画 - 简单的测试用例 【发布时间】：2011-08-06 02:33:13 【问题描述】：这是一个使用绝对定位和 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 错误吗？我是否缺少绝对定位的东西会导致浏览器重绘负载？如果有人可以尝试上面的代码并思考一下，我将非常感激......即使它只是为了让我放心我不会发疯:)
【问题讨论】：
我敲开了这个复制功能的快速 jsFiddle：jsfiddle.net/3THuW 我似乎无法让它在 Windows 上的 FF4 或 Chrome 10 中撕裂。 是的，在做同样的事情.. OS X 上的 Chrome 10 可以正常工作。也许有一点点判断力，但对于 js 来说并没有什么不寻常的地方。 我总是在 Mac 上发现 FF 对动画的扼流圈。似乎在其他浏览器上运行流畅，但即使是最简单的交叉淡入淡出在 Mac 上也是跳跃/结结巴巴。 这里也一样。动画在短时间内至少挂起一次 (ff/mac) 【参考方案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
);
乐于助人:)
【讨论】：
对不起，我真的不明白stuttery是什么意思？？
这只是优化代码...我认为他必须将时间段从3000更改为slow或fast
我只是把按钮放在那里作为启动动画的一种简单方法（并确保问题不是由我用来完全启动动画的某些计时器引起的一组代码，然后我将其简化为测试用例）。以上是关于JQuery 'Choppy' 动画 - 简单的测试用例的主要内容，如果未能解决你的问题，请参考以下文章
Choppy CATextLayer 动画：fontSize + position 同时