From f7ccec1b70a42de21b55dbb7b3d65da5628ade9e Mon Sep 17 00:00:00 2001 From: louisremi Date: Mon, 31 Jan 2011 18:57:23 +0100 Subject: [PATCH 01/11] use requestAnimationFrame instead of setInterval for animations, when available. --- src/effects.js | 6 +++++- src/support.js | 8 ++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/effects.js b/src/effects.js index d9e9a8b3..a41efc28 100644 --- a/src/effects.js +++ b/src/effects.js @@ -363,7 +363,9 @@ jQuery.fx.prototype = { t.elem = this.elem; if ( t() && jQuery.timers.push(t) && !timerId ) { - timerId = setInterval(fx.tick, fx.interval); + jQuery.support.requestAnimationFrame ? + window[jQuery.support.requestAnimationFrame](fx.tick): + timerId = setInterval(fx.tick, fx.interval); } }, @@ -468,6 +470,8 @@ jQuery.extend( jQuery.fx, { if ( !timers.length ) { jQuery.fx.stop(); + } else if ( jQuery.support.requestAnimationFrame ) { + window[jQuery.support.requestAnimationFrame](this); } }, diff --git a/src/support.js b/src/support.js index 4c309562..6d331868 100644 --- a/src/support.js +++ b/src/support.js @@ -58,6 +58,14 @@ // (WebKit defaults to false instead of true, IE too, if it's in an optgroup) optSelected: opt.selected, + // Verify requestAnimationFrame mechanism existence + // use the prefixed name as the value + requestAnimationFrame: mozRequestAnimationFrame ? + 'mozRequestAnimationFrame' : + webkitRequestAnimationFrame ? + 'webkitRequestAnimationFrame' : + false, + // Will be defined later deleteExpando: true, optDisabled: false, From 9dc63971877d583dac5bb5c8b0c3d73d1127f144 Mon Sep 17 00:00:00 2001 From: louisremi Date: Tue, 1 Feb 2011 12:02:02 +0100 Subject: [PATCH 02/11] omitting 'window.' was causing undefined errors --- src/support.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/support.js b/src/support.js index 6d331868..725575b3 100644 --- a/src/support.js +++ b/src/support.js @@ -60,9 +60,9 @@ // Verify requestAnimationFrame mechanism existence // use the prefixed name as the value - requestAnimationFrame: mozRequestAnimationFrame ? + requestAnimationFrame: window.mozRequestAnimationFrame ? 'mozRequestAnimationFrame' : - webkitRequestAnimationFrame ? + window.webkitRequestAnimationFrame ? 'webkitRequestAnimationFrame' : false, From 933ea8c5fa44f93085a7b720ac50c473a394251e Mon Sep 17 00:00:00 2001 From: louisremi Date: Tue, 1 Feb 2011 16:00:19 +0100 Subject: [PATCH 03/11] 'this' is the window --- src/effects.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/effects.js b/src/effects.js index a41efc28..196807ec 100644 --- a/src/effects.js +++ b/src/effects.js @@ -471,7 +471,7 @@ jQuery.extend( jQuery.fx, { if ( !timers.length ) { jQuery.fx.stop(); } else if ( jQuery.support.requestAnimationFrame ) { - window[jQuery.support.requestAnimationFrame](this); + window[jQuery.support.requestAnimationFrame](jQuery.fx.tick); } }, From 6de29b24b197f4fbbf3e48369343d457e7a80523 Mon Sep 17 00:00:00 2001 From: louisremi Date: Tue, 1 Feb 2011 18:26:41 +0100 Subject: [PATCH 04/11] timerId has to be set to true, to avoid starting multiple animation queues --- src/effects.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/effects.js b/src/effects.js index 196807ec..82548611 100644 --- a/src/effects.js +++ b/src/effects.js @@ -363,9 +363,9 @@ jQuery.fx.prototype = { t.elem = this.elem; if ( t() && jQuery.timers.push(t) && !timerId ) { - jQuery.support.requestAnimationFrame ? - window[jQuery.support.requestAnimationFrame](fx.tick): - timerId = setInterval(fx.tick, fx.interval); + timerId = jQuery.support.requestAnimationFrame ? + !window[jQuery.support.requestAnimationFrame](fx.tick): + setInterval(fx.tick, fx.interval); } }, From 03e6f7235bd671330f807642fefd297c42413c45 Mon Sep 17 00:00:00 2001 From: louisremi Date: Tue, 1 Feb 2011 19:57:14 +0100 Subject: [PATCH 05/11] there was no way to 'manually' stop an animation --- src/effects.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/effects.js b/src/effects.js index 82548611..6a72a88f 100644 --- a/src/effects.js +++ b/src/effects.js @@ -470,7 +470,7 @@ jQuery.extend( jQuery.fx, { if ( !timers.length ) { jQuery.fx.stop(); - } else if ( jQuery.support.requestAnimationFrame ) { + } else if ( jQuery.support.requestAnimationFrame && timerId) { window[jQuery.support.requestAnimationFrame](jQuery.fx.tick); } }, From 15e34d1f07d0c687d040af22dbc66f3978715217 Mon Sep 17 00:00:00 2001 From: louisremi Date: Wed, 2 Feb 2011 10:26:04 +0100 Subject: [PATCH 06/11] reduce impact of requestAnimationFrame on incompatible browsers by minimizing number of lookups --- src/effects.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/effects.js b/src/effects.js index 6a72a88f..12b87bd4 100644 --- a/src/effects.js +++ b/src/effects.js @@ -363,9 +363,17 @@ jQuery.fx.prototype = { t.elem = this.elem; if ( t() && jQuery.timers.push(t) && !timerId ) { - timerId = jQuery.support.requestAnimationFrame ? - !window[jQuery.support.requestAnimationFrame](fx.tick): - setInterval(fx.tick, fx.interval); + if ( jQuery.support.requestAnimationFrame ) { + timerId = true; + (function raf() { + if (timerId) { + window[jQuery.support.requestAnimationFrame](raf); + } + fx.tick(); + })(); + } else { + timerId = setInterval(fx.tick, fx.interval); + } } }, @@ -470,8 +478,6 @@ jQuery.extend( jQuery.fx, { if ( !timers.length ) { jQuery.fx.stop(); - } else if ( jQuery.support.requestAnimationFrame && timerId) { - window[jQuery.support.requestAnimationFrame](jQuery.fx.tick); } }, From c95ab2a39c178eee47ce7b1cbdffa812d7914bb6 Mon Sep 17 00:00:00 2001 From: louisremi Date: Wed, 2 Feb 2011 11:25:09 +0100 Subject: [PATCH 07/11] first tick should not occur immediatly; no tick should happen after a stop() + comments --- src/effects.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/effects.js b/src/effects.js index 12b87bd4..e5a10295 100644 --- a/src/effects.js +++ b/src/effects.js @@ -363,17 +363,16 @@ jQuery.fx.prototype = { t.elem = this.elem; if ( t() && jQuery.timers.push(t) && !timerId ) { - if ( jQuery.support.requestAnimationFrame ) { - timerId = true; - (function raf() { + // Use requestAnimationFrame instead of setInterval if available + ( timerId = jQuery.support.requestAnimationFrame ) ? + window[timerId](function raf() { + // timerId will be true as long as the animation hasn't been stopped if (timerId) { - window[jQuery.support.requestAnimationFrame](raf); + window[timerId](raf); + fx.tick(); } - fx.tick(); - })(); - } else { + }): timerId = setInterval(fx.tick, fx.interval); - } } }, From 5b0369366a83d7339f925bfef3a277d7287c9bd2 Mon Sep 17 00:00:00 2001 From: louisremi Date: Fri, 11 Mar 2011 11:33:15 +0100 Subject: [PATCH 08/11] shorten requestAnimationFrame test --- src/support.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/support.js b/src/support.js index 725575b3..64a54b83 100644 --- a/src/support.js +++ b/src/support.js @@ -13,7 +13,8 @@ a = div.getElementsByTagName("a")[0], select = document.createElement("select"), opt = select.appendChild( document.createElement("option") ), - input = div.getElementsByTagName("input")[0]; + input = div.getElementsByTagName("input")[0], + raf = "RequestAnimationFrame"; // Can't get basic test support if ( !all || !all.length || !a ) { @@ -60,11 +61,10 @@ // Verify requestAnimationFrame mechanism existence // use the prefixed name as the value - requestAnimationFrame: window.mozRequestAnimationFrame ? - 'mozRequestAnimationFrame' : - window.webkitRequestAnimationFrame ? - 'webkitRequestAnimationFrame' : - false, + requestAnimationFrame: + window['moz' + raf] ? 'moz' + raf : + window['webkit' + raf] ? 'webkit' + raf : + false, // Will be defined later deleteExpando: true, From fe3203bb5bdc0049467214e7f0979a3487d5681b Mon Sep 17 00:00:00 2001 From: timmywil Date: Mon, 4 Apr 2011 19:25:12 -0400 Subject: [PATCH 09/11] Some adjustments and style edits on lrbabe's pull for requestAnimationFrame - Moved support.js check to effects.js. This is just an assignment to the function if it exists. Removed string concatenations. + Still need to do the checks on window, but after that, window is no longer needed. - Switched ternary to an if statmenet - assigned timerId to a number rather than the function. I did perf tests to check which is faster. --- src/effects.js | 20 ++++++++++++-------- src/support.js | 10 +--------- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/effects.js b/src/effects.js index e5a10295..9835e959 100644 --- a/src/effects.js +++ b/src/effects.js @@ -11,7 +11,8 @@ var elemdisplay = {}, [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ], // opacity animations [ "opacity" ] - ]; + ], + requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestionAnimationFrame; jQuery.fn.extend({ show: function( speed, easing, callback ) { @@ -364,15 +365,18 @@ jQuery.fx.prototype = { if ( t() && jQuery.timers.push(t) && !timerId ) { // Use requestAnimationFrame instead of setInterval if available - ( timerId = jQuery.support.requestAnimationFrame ) ? - window[timerId](function raf() { - // timerId will be true as long as the animation hasn't been stopped - if (timerId) { - window[timerId](raf); + if ( requestAnimationFrame ) { + timerId = 1; + requestAnimationFrame(function raf() { + // When timerId gets set to null at any point, this stops + if ( timerId ) { + requestAnimationFrame( raf ); fx.tick(); } - }): - timerId = setInterval(fx.tick, fx.interval); + }); + } else { + timerId = setInterval( fx.tick, fx.interval ); + } } }, diff --git a/src/support.js b/src/support.js index 64a54b83..4c309562 100644 --- a/src/support.js +++ b/src/support.js @@ -13,8 +13,7 @@ a = div.getElementsByTagName("a")[0], select = document.createElement("select"), opt = select.appendChild( document.createElement("option") ), - input = div.getElementsByTagName("input")[0], - raf = "RequestAnimationFrame"; + input = div.getElementsByTagName("input")[0]; // Can't get basic test support if ( !all || !all.length || !a ) { @@ -59,13 +58,6 @@ // (WebKit defaults to false instead of true, IE too, if it's in an optgroup) optSelected: opt.selected, - // Verify requestAnimationFrame mechanism existence - // use the prefixed name as the value - requestAnimationFrame: - window['moz' + raf] ? 'moz' + raf : - window['webkit' + raf] ? 'webkit' + raf : - false, - // Will be defined later deleteExpando: true, optDisabled: false, From 9db18ddd84adf63166f411a4f2c776b51d1840e0 Mon Sep 17 00:00:00 2001 From: timmywil Date: Tue, 5 Apr 2011 16:28:25 -0400 Subject: [PATCH 10/11] Per rwaldron's request, added oRequestAnimationFrame as a possibility --- src/effects.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/effects.js b/src/effects.js index 9835e959..727c1a7a 100644 --- a/src/effects.js +++ b/src/effects.js @@ -12,7 +12,9 @@ var elemdisplay = {}, // opacity animations [ "opacity" ] ], - requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestionAnimationFrame; + requestAnimationFrame = window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame; jQuery.fn.extend({ show: function( speed, easing, callback ) { From 791402b4536b8c5cbfeaf27d0a3c639cdb9fd192 Mon Sep 17 00:00:00 2001 From: timmywil Date: Sun, 10 Apr 2011 17:17:34 -0400 Subject: [PATCH 11/11] Separate raf function definition from passing it to requestAnimationFrame --- src/effects.js | 8 +++++--- src/sizzle | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/effects.js b/src/effects.js index 727c1a7a..976fe765 100644 --- a/src/effects.js +++ b/src/effects.js @@ -350,7 +350,8 @@ jQuery.fx.prototype = { // Start an animation from one number to another custom: function( from, to, unit ) { var self = this, - fx = jQuery.fx; + fx = jQuery.fx, + raf; this.startTime = jQuery.now(); this.start = from; @@ -369,13 +370,14 @@ jQuery.fx.prototype = { // Use requestAnimationFrame instead of setInterval if available if ( requestAnimationFrame ) { timerId = 1; - requestAnimationFrame(function raf() { + raf = function() { // When timerId gets set to null at any point, this stops if ( timerId ) { requestAnimationFrame( raf ); fx.tick(); } - }); + }; + requestAnimationFrame( raf ); } else { timerId = setInterval( fx.tick, fx.interval ); } diff --git a/src/sizzle b/src/sizzle index f12b9309..80f2b81d 160000 --- a/src/sizzle +++ b/src/sizzle @@ -1 +1 @@ -Subproject commit f12b9309269ba7e705a99efe099f86ed1fe98d58 +Subproject commit 80f2b81d1fbc13d62afb91cb87e1452fbbec1ef4