jQuery同步动画
[2011-09-26 13:09:35 --@jQuery]
一个容易忽略的细节，可能没有人会考虑到，但jQuery却很好地解决了它，让我佩服：
复杂的dom操作前后之间之间会有时间差，虽然几乎可以不用考虑，但在一定数量级别时，差异是存在的：
http://cmc3.cn/animate/animate-1.3.2.html
300个节点一起animate，中途停止时，预想中，每个节点所到达的位置应该是一致的。实际上位置却不一样，jquery1.3.2里，动画的关键函数中计算时间都是用new Date：
因为代码执行先后顺序产生时间差的原因！jQuery的解决方案：统一一个时间：
利用javascript单线程，setTimeout在animate函数执行后只规定一个startTime.并且在计时器中，每次时间间隔时取的时间也是一致的。setTimeout(clearFxNow, 0);表示在当前进程执行完成后立即执行clearFxNow函数。
一致的动画：
http://cmc3.cn/animate/animate-1.6.html
复杂的dom操作前后之间之间会有时间差，虽然几乎可以不用考虑，但在一定数量级别时，差异是存在的：
http://cmc3.cn/animate/animate-1.3.2.html
300个节点一起animate，中途停止时，预想中，每个节点所到达的位置应该是一致的。实际上位置却不一样，jquery1.3.2里，动画的关键函数中计算时间都是用new Date：
function now(){
return +new Date;
}
custom: function(from, to, unit) {
this.startTime = now();
step: function(gotoEnd) {
var t = now();
return +new Date;
}
custom: function(from, to, unit) {
this.startTime = now();
step: function(gotoEnd) {
var t = now();
因为代码执行先后顺序产生时间差的原因！jQuery的解决方案：统一一个时间：
// Animations created synchronously will run
synchronously
function createFxNow() {
setTimeout(clearFxNow, 0);
return (fxNow = jQuery.now());
}
function clearFxNow() {
fxNow = undefined;
}
synchronously
function createFxNow() {
setTimeout(clearFxNow, 0);
return (fxNow = jQuery.now());
}
function clearFxNow() {
fxNow = undefined;
}
利用javascript单线程，setTimeout在animate函数执行后只规定一个startTime.并且在计时器中，每次时间间隔时取的时间也是一致的。setTimeout(clearFxNow, 0);表示在当前进程执行完成后立即执行clearFxNow函数。
一致的动画：
http://cmc3.cn/animate/animate-1.6.html
本文禁止复制/转载！
共 1 评论
1. 2011-11-01 23:11:18,from Honeysuckle