Permalink
Browse files

Effects: Improve raf logic

* Make animation behave as if jQuery.fx.off = true if document is hidden

* Use cancelAnimationFrame in jQuery.fx.stop

Closes gh-1578
  • Loading branch information...
markelog committed May 12, 2014
1 parent 72119e0 commit 708764f47b0c8de152bbb444d0f608db558b76ed
Showing with 46 additions and 21 deletions.
  1. +18 −21 src/effects.js
  2. +28 −0 test/unit/effects.js
View
@@ -78,11 +78,6 @@ function raf() {
}
}
-// 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() {
@@ -438,8 +433,15 @@ jQuery.speed = function( speed, easing, fn ) {
easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
};
- opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
- opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
+ // Go to the end state if fx are off or if document is hidden
+ if ( jQuery.fx.off || document.hidden ) {
+ opt.duration = 0;
+
+ } else {
+ opt.duration = typeof opt.duration === "number" ?
+ opt.duration : opt.duration in jQuery.fx.speeds ?
+ jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
+ }
// Normalize opt.queue - true/undefined/null -> "fx"
if ( opt.queue == null || opt.queue === true ) {
@@ -464,9 +466,6 @@ 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()
@@ -475,10 +474,6 @@ 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() {
@@ -646,17 +641,19 @@ jQuery.fx.timer = function( timer ) {
jQuery.fx.interval = 13;
jQuery.fx.start = function() {
if ( !timerId ) {
- if ( window.requestAnimationFrame ) {
- timerId = true;
- window.requestAnimationFrame( raf );
- } else {
- timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
- }
+ timerId = window.requestAnimationFrame ?
+ window.requestAnimationFrame( raf ) :
+ setInterval( jQuery.fx.tick, jQuery.fx.interval );
}
};
jQuery.fx.stop = function() {
- clearInterval( timerId );
+ if ( window.cancelAnimationFrame ) {
+ window.cancelAnimationFrame( timerId );
+ } else {
+ clearInterval( timerId );
+ }
+
timerId = null;
};
View
@@ -2183,4 +2183,32 @@ test( "Respect display value on inline elements (#14824)", 2, function() {
clock.tick( 800 );
});
+test( "Animation should go to its end state if document.hidden = true", 1, function() {
+ var height;
+ if ( Object.defineProperty ) {
+
+ // Can't rewrite document.hidden property if its host property
+ try {
+ Object.defineProperty( document, "hidden", {
+ get: function() {
+ return true;
+ }
+ });
+ } catch ( e ) {}
+ } else {
+ document.hidden = true;
+ }
+
+ if ( document.hidden ) {
+ height = jQuery( "#qunit-fixture" ).animate({ height: 500 } ).height();
+
+ equal( height, 500, "Animation should happen immediately if document.hidden = true" );
+ jQuery( document ).removeProp( "hidden" );
+
+ } else {
+ ok( true, "Can't run the test since we can't reproduce correct environment for it" );
+ }
+});
+
+
})();

0 comments on commit 708764f

Please sign in to comment.