Effects: Reintroduce use of requestAnimationFrame

markelog · markelog · commit 72119e0023dc · 2014-06-16T03:08:46.000+04:00
Same as before, just use don't use prefixes, since they pretty match useless now
and use page visibility API to determine if animation should start.

Also null the requestAnimationFrame attribute in window for tests since
sinon does not provide fake method for it.

Fixes #15147
diff --git a/src/effects.js b/src/effects.js
@@ -71,6 +71,18 @@ var
 		} ]
 	};
 
+function raf() {
+	if ( timerId ) {
+		window.requestAnimationFrame( raf );
+		jQuery.fx.tick();
+	}
+}
+
+// Will get false negative for old browsers which is okay
+function isDocumentHidden() {
+	return "hidden" in document && document.hidden;
+}
+
 // Animations created synchronously will run synchronously
 function createFxNow() {
 	setTimeout(function() {
@@ -452,6 +464,9 @@ jQuery.speed = function( speed, easing, fn ) {
 
 jQuery.fn.extend({
 	fadeTo: function( speed, to, easing, callback ) {
+		if ( isDocumentHidden() ) {
+			return this;
+		}
 
 		// Show any hidden elements after setting opacity to 0
 		return this.filter( isHidden ).css( "opacity", 0 ).show()
@@ -460,6 +475,10 @@ jQuery.fn.extend({
 			.end().animate({ opacity: to }, speed, easing, callback );
 	},
 	animate: function( prop, speed, easing, callback ) {
+		if ( isDocumentHidden() ) {
+			return this;
+		}
+
 		var empty = jQuery.isEmptyObject( prop ),
 			optall = jQuery.speed( speed, easing, callback ),
 			doAnimation = function() {
@@ -625,10 +644,14 @@ jQuery.fx.timer = function( timer ) {
 };
 
 jQuery.fx.interval = 13;
-
 jQuery.fx.start = function() {
 	if ( !timerId ) {
-		timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
+		if ( window.requestAnimationFrame ) {
+			timerId = true;
+			window.requestAnimationFrame( raf );
+		} else {
+			timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
+		}
 	}
 };
 
diff --git a/test/unit/effects.js b/test/unit/effects.js
@@ -5,8 +5,11 @@ if ( !jQuery.fx ) {
 	return;
 }
 
+var oldRaf = window.requestAnimationFrame;
+
 module("effects", {
 	setup: function() {
+		window.requestAnimationFrame = null;
 		this.clock = sinon.useFakeTimers( 505877050 );
 		this._oldInterval = jQuery.fx.interval;
 		jQuery.fx.interval = 10;
@@ -17,6 +20,7 @@ module("effects", {
 		jQuery.now = Date.now;
 		jQuery.fx.stop();
 		jQuery.fx.interval = this._oldInterval;
+		window.requestAnimationFrame = oldRaf;
 		return moduleTeardown.apply( this, arguments );
 	}
 });
