Skip to content

Commit

Permalink
Animation state is tracked on toggled/stopped animations using the pr…
Browse files Browse the repository at this point in the history 
…ivate data cache. Fixes #8685. See full commit message for more. Fixes #6641.

- Example: http://jsfiddle.net/timmywil/gqZL5/24/

- http://bugs.jquery.com/ticket/8685

- Check the completed timer has not been removed already so other timers do not get accidentally removed. Fixes #6641.

- Style edits, code reductions, and optimizations for the effects module
  • Loading branch information
@timmywil
timmywil committed Sep 19, 2011
1 parent 92405d4 commit 1878885
Show file tree
Hide file tree
Showing 3 changed files with 256 additions and 159 deletions.
144 changes: 87 additions & 57 deletions src/effects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ jQuery.fn.extend({
},

animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback);
var optall = jQuery.speed( speed, easing, callback );

if ( jQuery.isEmptyObject( prop ) ) {
return this.each( optall.complete, [ false ] );
Expand All @@ -137,9 +137,9 @@ jQuery.fn.extend({
var opt = jQuery.extend( {}, optall ),
isElement = this.nodeType === 1,
hidden = isElement && jQuery(this).is(":hidden"),
name, val, p,
display, e,
parts, start, end, unit;
name, val, p, e,
parts, start, end, unit,
method;

// will store per property easing and be used to determine when an animation is complete
opt.animatedProperties = {};
Expand Down Expand Up @@ -175,25 +175,17 @@ jQuery.fn.extend({
opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];

// Set display property to inline-block for height/width
// animations on inline elements that are having width/height
// animated
// animations on inline elements that are having width/height animated
if ( jQuery.css( this, "display" ) === "inline" &&
jQuery.css( this, "float" ) === "none" ) {
if ( !jQuery.support.inlineBlockNeedsLayout ) {

// inline-level elements accept inline-block;
// block-level elements need to be inline with layout
if ( !jQuery.support.inlineBlockNeedsLayout || defaultDisplay( this.nodeName ) === "inline" ) {
this.style.display = "inline-block";

} else {
display = defaultDisplay( this.nodeName );

// inline-level elements accept inline-block;
// block-level elements need to be inline with layout
if ( display === "inline" ) {
this.style.display = "inline-block";

} else {
this.style.display = "inline";
this.style.zoom = 1;
}
this.style.zoom = 1;
}
}
}
Expand All @@ -207,8 +199,16 @@ jQuery.fn.extend({
e = new jQuery.fx( this, opt, p );
val = prop[ p ];

if ( rfxtypes.test(val) ) {
e[ val === "toggle" ? hidden ? "show" : "hide" : val ]();
if ( rfxtypes.test( val ) ) {
// Tracks whether to show or hide based on private
// data attached to the element
method = jQuery._data( this, "toggle" + p ) || (val === "toggle" ? hidden ? "show" : "hide" : 0);
if ( method ) {
jQuery._data( this, "toggle" + p, method === "show" ? "hide" : "show" );
e[ method ]();
} else {
e[ val ]();
}

} else {
parts = rfxnum.exec( val );
Expand Down Expand Up @@ -251,18 +251,21 @@ jQuery.fn.extend({
this.each(function() {
var timers = jQuery.timers,
i = timers.length;

// clear marker counters if we know they won't be
if ( !gotoEnd ) {
jQuery._unmark( true, this );
}
while ( i-- ) {
if ( timers[i].elem === this ) {
if (gotoEnd) {
if ( timers[ i ].elem === this ) {
if ( gotoEnd ) {
// force the next step to be the last
timers[i](true);
timers[ i ]( true );
} else {
timers[ i ].saveState();
}

timers.splice(i, 1);
timers.splice( i, 1 );
}
}
});
Expand Down Expand Up @@ -291,7 +294,7 @@ function clearFxNow() {
function genFx( type, num ) {
var obj = {};

jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice(0,num)), function() {
jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() {
obj[ this ] = type;
});

Expand All @@ -300,9 +303,9 @@ function genFx( type, num ) {

// Generate shortcuts for custom animations
jQuery.each({
slideDown: genFx("show", 1),
slideUp: genFx("hide", 1),
slideToggle: genFx("toggle", 1),
slideDown: genFx( "show", 1 ),
slideUp: genFx( "hide", 1 ),
slideToggle: genFx( "toggle", 1 ),
fadeIn: { opacity: "show" },
fadeOut: { opacity: "hide" },
fadeToggle: { opacity: "toggle" }
Expand All @@ -314,15 +317,15 @@ jQuery.each({

jQuery.extend({
speed: function( speed, easing, fn ) {
var opt = speed && typeof speed === "object" ? jQuery.extend({}, speed) : {
var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
complete: fn || !fn && easing ||
jQuery.isFunction( speed ) && speed,
duration: speed,
easing: fn && easing || easing && !jQuery.isFunction(easing) && easing
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;
opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;

// Queueing
opt.old = opt.complete;
Expand Down Expand Up @@ -369,12 +372,12 @@ jQuery.fx.prototype = {
this.options.step.call( this.elem, this.now, this );
}

(jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );
(jQuery.fx.step[ this.prop ] || jQuery.fx.step._default)( this );
},

// Get the current size
cur: function() {
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
if ( this.elem[ this.prop ] != null && (!this.elem.style || this.elem.style[ this.prop ] == null) ) {
return this.elem[ this.prop ];
}

Expand All @@ -392,17 +395,21 @@ jQuery.fx.prototype = {
fx = jQuery.fx;

this.startTime = fxNow || createFxNow();
this.start = from;
this.end = to;
this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
this.now = this.start;
this.now = this.start = from;
this.pos = this.state = 0;
this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );

function t( gotoEnd ) {
return self.step(gotoEnd);
return self.step( gotoEnd );
}

t.elem = this.elem;
t.saveState = function() {
if ( self.options.hide && jQuery._data( self.elem, "fxshow" + self.prop ) === undefined ) {
jQuery._data( self.elem, "fxshow" + self.prop, self.start );
}
};

if ( t() && jQuery.timers.push(t) && !timerId ) {
timerId = setInterval( fx.tick, fx.interval );
Expand All @@ -411,14 +418,20 @@ jQuery.fx.prototype = {

// Simple 'show' function
show: function() {
var dataShow = jQuery._data( this.elem, "fxshow" + this.prop );

// Remember where we started, so that we can go back to it later
this.options.orig[this.prop] = jQuery.style( this.elem, this.prop );
this.options.orig[ this.prop ] = dataShow || jQuery.style( this.elem, this.prop );
this.options.show = true;

// Begin the animation
// Make sure that we start at a small width/height to avoid any
// flash of content
this.custom(this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur());
// Make sure that we start at a small width/height to avoid any flash of content
if ( dataShow !== undefined ) {
// This show is picking up where a previous hide or show left off
this.custom( this.cur(), dataShow );
} else {
this.custom( this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur() );
}

// Start by showing the element
jQuery( this.elem ).show();
Expand All @@ -427,11 +440,11 @@ jQuery.fx.prototype = {
// Simple 'hide' function
hide: function() {
// Remember where we started, so that we can go back to it later
this.options.orig[this.prop] = jQuery.style( this.elem, this.prop );
this.options.orig[ this.prop ] = jQuery._data( this.elem, "fxshow" + this.prop ) || jQuery.style( this.elem, this.prop );
this.options.hide = true;

// Begin the animation
this.custom(this.cur(), 0);
this.custom( this.cur(), 0 );
},

// Each step of an animation
Expand All @@ -440,7 +453,7 @@ jQuery.fx.prototype = {
done = true,
elem = this.elem,
options = this.options,
i, n;
p, n;

if ( gotoEnd || t >= options.duration + this.startTime ) {
this.now = this.end;
Expand All @@ -449,8 +462,8 @@ jQuery.fx.prototype = {

options.animatedProperties[ this.prop ] = true;

for ( i in options.animatedProperties ) {
if ( options.animatedProperties[i] !== true ) {
for ( p in options.animatedProperties ) {
if ( options.animatedProperties[ p ] !== true ) {
done = false;
}
}
Expand All @@ -459,20 +472,23 @@ jQuery.fx.prototype = {
// Reset the overflow
if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {

jQuery.each( [ "", "X", "Y" ], function (index, value) {
elem.style[ "overflow" + value ] = options.overflow[index];
jQuery.each( [ "", "X", "Y" ], function( index, value ) {
elem.style[ "overflow" + value ] = options.overflow[ index ];
});
}

// Hide the element if the "hide" operation was done
if ( options.hide ) {
jQuery(elem).hide();
jQuery( elem ).hide();
}

// Reset the properties, if the item has been hidden or shown
if ( options.hide || options.show ) {
for ( var p in options.animatedProperties ) {
jQuery.style( elem, p, options.orig[p] );
for ( p in options.animatedProperties ) {
jQuery.style( elem, p, options.orig[ p ] );
jQuery.removeData( elem, "fxshow" + p, true );
// Toggle data is no longer needed
jQuery.removeData( elem, "toggle" + p, true );
}
}

Expand All @@ -491,8 +507,8 @@ jQuery.fx.prototype = {
this.state = n / options.duration;

// Perform the easing function, defaults to swing
this.pos = jQuery.easing[ options.animatedProperties[ this.prop ] ]( this.state, n, 0, 1, options.duration );
this.now = this.start + ((this.end - this.start) * this.pos);
this.pos = jQuery.easing[ options.animatedProperties[this.prop] ]( this.state, n, 0, 1, options.duration );
this.now = this.start + ( (this.end - this.start) * this.pos );
}
// Perform the next step of the animation
this.update();
Expand All @@ -504,9 +520,15 @@ jQuery.fx.prototype = {

jQuery.extend( jQuery.fx, {
tick: function() {
for ( var timers = jQuery.timers, i = 0 ; i < timers.length ; ++i ) {
if ( !timers[i]() ) {
timers.splice(i--, 1);
var timer,
timers = jQuery.timers,
i = 0;

for ( ; i < timers.length; i++ ) {
timer = timers[ i ];
// Checks the timer has not already been removed
if ( !timer() && timers[ i ] === timer ) {
timers.splice( i--, 1 );
}
}

Expand Down Expand Up @@ -536,14 +558,22 @@ jQuery.extend( jQuery.fx, {

_default: function( fx ) {
if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) {
fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;
fx.elem.style[ fx.prop ] = fx.now + fx.unit;
} else {
fx.elem[ fx.prop ] = fx.now;
}
}
}
});

// Adds width/height step functions
// Do not set anything below 0
jQuery.each([ "width", "height" ], function( i, prop ) {
jQuery.fx.step[ prop ] = function( fx ) {
jQuery.style( fx.elem, prop, Math.max(0, fx.now) );
};
});

if ( jQuery.expr && jQuery.expr.filters ) {
jQuery.expr.filters.animated = function( elem ) {
return jQuery.grep(jQuery.timers, function( fn ) {
Expand Down
Loading

0 comments on commit 1878885

Please sign in to comment.