使用 javascript 移动元素的最佳做法是什么？ 您使用超时或间隔吗？ 有 10 毫秒的定时事件是不好的，还是会很精确？ 您是逐个像素移动，还是移动总距离的某个部分？ 如果使用区间，当元素就位时如何停止区间？
我最近两次在 javascript 中看到动作是使用 jQuery 和 Raphael.js，我都无法理解它们的源代码。是否有一些好的教程或代码示例？ jQuery使用的方法有简单的解释吗？
【问题讨论】：
标签： javascript html animation jquery-animate
最近有一个名为requestAnimationFrame 的函数可以尽快运行一个函数。这是一个很好的做法，因为它是制作用于动画目的的。
它在编码方面的工作方式与setTimeout相同，例如当函数完成时你调用requestAnimationFrame。
在函数中，您获取当前时间以查看当时对象应如何定位。
你可以用cancelRequestAnimationFrame取消一个挂起的函数，传递requestAnimationFrame的返回值。
目前这不是跨浏览器，并且功能是供应商前缀的，例如webkitRequestAnimationFrame 用于 Chrome。
例如：http://jsfiddle.net/pimvdb/G2ThU/1/.
var div = document.getElementById('div');
var animation;
function move() {
var time = Math.round((new Date()).getTime() / 10) % 200;
div.style.left = time + 'px';
animation = requestAnimationFrame(move);
}
document.getElementById("start").onclick = function() {
animation = requestAnimationFrame(move);
}
document.getElementById("stop").onclick = function() {
cancelRequestAnimationFrame(animation);
}
【讨论】：
在这里你可以找到一个很好的 Javascript 动画教程： http://www.schillmania.com/content/projects/javascript-animation-1
但是你说的是对的。 Jquery Animate 使用 setTimeout，根据持续时间、位置和缓动的计算来移动对象。
【讨论】：
我相信，间隔更可取，因为您只在代码中设置一次，而不是每帧设置一次。它只需要读取一次代码并多次复用，而不是每次创建都读取。
10ms 有点短。计算机本身可以支持大约 16 毫秒的间隔，然后可以使用更精确的计时器来实现更快的间隔，但是这些非常耗电。 IE9 支持两者，具体取决于计算机的电源设置，但理想情况下，您不应该需要超过 50 毫秒 (20 FPS) 的速度。
我喜欢根据动画开始后的时间移动总距离的一小部分。这样，无论计算机和浏览器的速度如何，动画将始终花费完全相同的时间。保证。
类似：
interval = setInterval(function() {
// do stuff
if( /*animation ended*/) clearInterval(interval);
},time);
jQuery 对某些人来说很容易，但我个人觉得没有什么比自己用简单的旧 JS 编写更好的了。更容易理解到底发生了什么，而不是依赖某些框架来为您提供正确的解决方案。
【讨论】：
var，并且你没有在闭包中覆盖它，这没有什么问题。