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
This commit is contained in:
Oleg Gaidarenko
2014-05-12 21:53:40 +04:00
parent 72119e0023
commit 708764f47b
2 changed files with 46 additions and 21 deletions

39
src/effects.js vendored
View File

@@ -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;
};