Effects: Reintroduce use of requestAnimationFrame

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
Ref 72119e0

Author: markelog

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() {
@@ -460,6 +472,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()
@@ -468,6 +483,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() {
@@ -636,7 +655,12 @@ 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 );
+		}
 	}
 };
 

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;
@@ -15,6 +18,7 @@ module("effects", {
 		this.clock.restore();
 		jQuery.fx.stop();
 		jQuery.fx.interval = this._oldInterval;
+		window.requestAnimationFrame = oldRaf;
 		return moduleTeardown.apply( this, arguments );
 	}
 });