Skip to content
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 Jun 15, 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
@@ -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;
};

@@ -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.