Animation state is tracked on toggled/stopped animations using the private data cache. Tests added. Fixes #8685.

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

- http://bugs.jquery.com/ticket/8685
This commit is contained in:
timmywil 2011-05-30 01:18:09 -04:00
parent 51aa9c5f32
commit d729ef951c
2 changed files with 163 additions and 96 deletions

48
src/effects.js vendored
View file

@ -141,7 +141,8 @@ jQuery.fn.extend({
isElement = this.nodeType === 1, isElement = this.nodeType === 1,
hidden = isElement && jQuery(this).is(":hidden"), hidden = isElement && jQuery(this).is(":hidden"),
name, val, p, e, name, val, p, e,
parts, start, end, unit; parts, start, end, unit,
method;
// will store per property easing and be used to determine when an animation is complete // will store per property easing and be used to determine when an animation is complete
opt.animatedProperties = {}; opt.animatedProperties = {};
@ -203,7 +204,15 @@ jQuery.fn.extend({
val = prop[ p ]; val = prop[ p ];
if ( rfxtypes.test( val ) ) { if ( rfxtypes.test( val ) ) {
e[ val === "toggle" ? hidden ? "show" : "hide" : 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 { } else {
parts = rfxnum.exec( val ); parts = rfxnum.exec( val );
@ -246,6 +255,7 @@ jQuery.fn.extend({
this.each(function() { this.each(function() {
var timers = jQuery.timers, var timers = jQuery.timers,
i = timers.length; i = timers.length;
// clear marker counters if we know they won't be // clear marker counters if we know they won't be
if ( !gotoEnd ) { if ( !gotoEnd ) {
jQuery._unmark( true, this ); jQuery._unmark( true, this );
@ -255,6 +265,8 @@ jQuery.fn.extend({
if ( gotoEnd ) { if ( gotoEnd ) {
// force the next step to be the last // 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);
@ -398,6 +410,11 @@ jQuery.fx.prototype = {
} }
t.elem = this.elem; 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 ) { if ( t() && jQuery.timers.push(t) && !timerId ) {
// Use requestAnimationFrame instead of setInterval if available // Use requestAnimationFrame instead of setInterval if available
@ -419,14 +436,20 @@ jQuery.fx.prototype = {
// Simple 'show' function // Simple 'show' function
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 // 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; this.options.show = true;
// Begin the animation // Begin the animation
// Make sure that we start at a small width/height to avoid any // Make sure that we start at a small width/height to avoid any flash of content
// 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() ); this.custom( this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur() );
}
// Start by showing the element // Start by showing the element
jQuery( this.elem ).show(); jQuery( this.elem ).show();
@ -435,7 +458,7 @@ jQuery.fx.prototype = {
// Simple 'hide' function // Simple 'hide' function
hide: function() { hide: function() {
// Remember where we started, so that we can go back to it later // 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; this.options.hide = true;
// Begin the animation // Begin the animation
@ -448,7 +471,7 @@ jQuery.fx.prototype = {
done = true, done = true,
elem = this.elem, elem = this.elem,
options = this.options, options = this.options,
i, n; p, n;
if ( gotoEnd || t >= options.duration + this.startTime ) { if ( gotoEnd || t >= options.duration + this.startTime ) {
this.now = this.end; this.now = this.end;
@ -457,8 +480,8 @@ jQuery.fx.prototype = {
options.animatedProperties[ this.prop ] = true; options.animatedProperties[ this.prop ] = true;
for ( i in options.animatedProperties ) { for ( p in options.animatedProperties ) {
if ( options.animatedProperties[ i ] !== true ) { if ( options.animatedProperties[ p ] !== true ) {
done = false; done = false;
} }
} }
@ -479,8 +502,11 @@ jQuery.fx.prototype = {
// Reset the properties, if the item has been hidden or shown // Reset the properties, if the item has been hidden or shown
if ( options.hide || options.show ) { if ( options.hide || options.show ) {
for ( var p in options.animatedProperties ) { for ( p in options.animatedProperties ) {
jQuery.style( elem, p, options.orig[ p ] ); 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 );
} }
} }
@ -512,7 +538,7 @@ jQuery.fx.prototype = {
jQuery.extend( jQuery.fx, { jQuery.extend( jQuery.fx, {
tick: function() { tick: function() {
for ( var timers = jQuery.timers, i = 0 ; i < timers.length ; ++i ) { for ( var timers = jQuery.timers, i = 0; i < timers.length; i++ ) {
if ( !timers[ i ]() ) { if ( !timers[ i ]() ) {
timers.splice(i--, 1); timers.splice(i--, 1);
} }

61
test/unit/effects.js vendored
View file

@ -676,23 +676,23 @@ jQuery.each( {
return ""; return "";
}, },
"JS 100": function( elem, prop ) { "JS 100": function( elem, prop ) {
jQuery(elem).css(prop,prop == "opacity" ? 1 : "100px"); jQuery( elem ).css( prop, prop === "opacity" ? 1 : "100px" );
return prop == "opacity" ? 1 : 100; return prop === "opacity" ? 1 : 100;
}, },
"CSS 50": function( elem, prop ) { "CSS 50": function( elem, prop ) {
jQuery( elem ).addClass( "med" + prop ); jQuery( elem ).addClass( "med" + prop );
return ""; return "";
}, },
"JS 50": function( elem, prop ) { "JS 50": function( elem, prop ) {
jQuery(elem).css(prop,prop == "opacity" ? 0.50 : "50px"); jQuery( elem ).css( prop, prop === "opacity" ? 0.50 : "50px" );
return prop == "opacity" ? 0.5 : 50; return prop === "opacity" ? 0.5 : 50;
}, },
"CSS 0": function( elem, prop ) { "CSS 0": function( elem, prop ) {
jQuery( elem ).addClass( "no" + prop ); jQuery( elem ).addClass( "no" + prop );
return ""; return "";
}, },
"JS 0": function( elem, prop ) { "JS 0": function( elem, prop ) {
jQuery(elem).css(prop,prop == "opacity" ? 0 : "0px"); jQuery( elem ).css( prop, prop === "opacity" ? 0 : "0px" );
return 0; return 0;
} }
}, function( fn, f ) { }, function( fn, f ) {
@ -750,22 +750,27 @@ jQuery.each( {
elem = elem[ 0 ]; elem = elem[ 0 ];
if ( t_w == "show" ) if ( t_w == "show" ) {
equals( elem.style.display, "block", "Showing, display should block: " + elem.style.display ); equals( elem.style.display, "block", "Showing, display should block: " + elem.style.display );
}
if ( t_w == "hide"||t_w == "show" ) if ( t_w == "hide" || t_w == "show" ) {
ok( f_w === "" ? elem.style.width === f_w : elem.style.width.indexOf( f_w ) === 0, "Width must be reset to " + f_w + ": " + elem.style.width ); ok( f_w === "" ? elem.style.width === f_w : elem.style.width.indexOf( f_w ) === 0, "Width must be reset to " + f_w + ": " + elem.style.width );
}
if ( t_h == "hide"||t_h == "show" ) if ( t_h == "hide" || t_h == "show" ) {
ok( f_h === "" ? elem.style.height === f_h : elem.style.height.indexOf( f_h ) === 0, "Height must be reset to " + f_h + ": " + elem.style.height ); ok( f_h === "" ? elem.style.height === f_h : elem.style.height.indexOf( f_h ) === 0, "Height must be reset to " + f_h + ": " + elem.style.height );
}
var cur_o = jQuery.style(elem, "opacity"); var cur_o = jQuery.style(elem, "opacity");
if ( t_o == "hide" || t_o == "show" ) if ( t_o == "hide" || t_o == "show" ) {
equals( cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o ); equals( cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o );
}
if ( t_w == "hide" ) if ( t_w == "hide" ) {
equals( elem.style.display, "none", "Hiding, display should be none: " + elem.style.display ); equals( elem.style.display, "none", "Hiding, display should be none: " + elem.style.display );
}
if ( t_o.constructor == Number ) { if ( t_o.constructor == Number ) {
equals( cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o ); equals( cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o );
@ -921,6 +926,42 @@ test("jQuery.show('fast') doesn't clear radio buttons (bug #1095)", function ()
}); });
}); });
jQuery.each({
"slideToggle": function( $elem ) {
return $elem.height();
},
"fadeToggle": function( $elem ) {
return $elem.css("opacity");
},
"toggle": function( $elem ) {
return $elem.width();
}
},
function( method, defProp ) {
test( method + "().stop()." + method + "()", function() {
expect( 4 );
jQuery.each([ "in", "out" ], function( i, type ) {
var $elem = jQuery( "#" + method.toLowerCase() + type ),
startVal = defProp( $elem );
$elem[ method ]("fast");
stop();
setTimeout( function() {
$elem.stop();
notEqual( defProp( $elem ), startVal, ".stop() is called about halfway through animation." );
$elem[ method ]("fast", function() {
equal( defProp( jQuery(this) ), startVal, "After doing .stop() halfway, check that state has been saved for returning to original property value." );
start();
});
}, 100);
});
});
});
test("animate with per-property easing", function(){ test("animate with per-property easing", function(){
expect(5); expect(5);