From 1878885fb7a09b65d95980a9b7dce2df2944e4f9 Mon Sep 17 00:00:00 2001 From: timmywil Date: Mon, 12 Sep 2011 19:48:44 -0400 Subject: [PATCH] Animation state is tracked on toggled/stopped animations using the private 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 --- src/effects.js | 144 +++++++++++++++---------- src/queue.js | 29 +++--- test/unit/effects.js | 242 +++++++++++++++++++++++++++---------------- 3 files changed, 256 insertions(+), 159 deletions(-) diff --git a/src/effects.js b/src/effects.js index 800917151..7e46a5c3f 100644 --- a/src/effects.js +++ b/src/effects.js @@ -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 ] ); @@ -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 = {}; @@ -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; } } } @@ -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 ); @@ -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 ); } } }); @@ -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; }); @@ -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" } @@ -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; @@ -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 ]; } @@ -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 ); @@ -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(); @@ -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 @@ -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; @@ -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; } } @@ -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 ); } } @@ -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(); @@ -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 ); } } @@ -536,7 +558,7 @@ 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; } @@ -544,6 +566,14 @@ jQuery.extend( jQuery.fx, { } }); +// 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 ) { diff --git a/src/queue.js b/src/queue.js index 66383c190..cd6aeb26b 100644 --- a/src/queue.js +++ b/src/queue.js @@ -4,15 +4,15 @@ function handleQueueMarkDefer( elem, type, src ) { var deferDataKey = type + "defer", queueDataKey = type + "queue", markDataKey = type + "mark", - defer = jQuery.data( elem, deferDataKey, undefined, true ); + defer = jQuery._data( elem, deferDataKey ); if ( defer && - ( src === "queue" || !jQuery.data( elem, queueDataKey, undefined, true ) ) && - ( src === "mark" || !jQuery.data( elem, markDataKey, undefined, true ) ) ) { + ( src === "queue" || !jQuery._data(elem, queueDataKey) ) && + ( src === "mark" || !jQuery._data(elem, markDataKey) ) ) { // Give room for hard-coded callbacks to fire first // and eventually mark/queue something else on the element setTimeout( function() { - if ( !jQuery.data( elem, queueDataKey, undefined, true ) && - !jQuery.data( elem, markDataKey, undefined, true ) ) { + if ( !jQuery._data( elem, queueDataKey ) && + !jQuery._data( elem, markDataKey ) ) { jQuery.removeData( elem, deferDataKey, true ); defer.resolve(); } @@ -25,7 +25,7 @@ jQuery.extend({ _mark: function( elem, type ) { if ( elem ) { type = (type || "fx") + "mark"; - jQuery.data( elem, type, (jQuery.data(elem,type,undefined,true) || 0) + 1, true ); + jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 ); } }, @@ -38,9 +38,9 @@ jQuery.extend({ if ( elem ) { type = type || "fx"; var key = type + "mark", - count = force ? 0 : ( (jQuery.data( elem, key, undefined, true) || 1 ) - 1 ); + count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 ); if ( count ) { - jQuery.data( elem, key, count, true ); + jQuery._data( elem, key, count ); } else { jQuery.removeData( elem, key, true ); handleQueueMarkDefer( elem, type, "mark" ); @@ -49,13 +49,15 @@ jQuery.extend({ }, queue: function( elem, type, data ) { + var q; if ( elem ) { type = (type || "fx") + "queue"; - var q = jQuery.data( elem, type, undefined, true ); + q = jQuery._data( elem, type ); + // Speed up dequeue by getting out quickly if this is just a lookup if ( data ) { if ( !q || jQuery.isArray(data) ) { - q = jQuery.data( elem, type, jQuery.makeArray(data), true ); + q = jQuery._data( elem, type, jQuery.makeArray(data) ); } else { q.push( data ); } @@ -68,8 +70,7 @@ jQuery.extend({ type = type || "fx"; var queue = jQuery.queue( elem, type ), - fn = queue.shift(), - defer; + fn = queue.shift(); // If the fx queue is dequeued, always remove the progress sentinel if ( fn === "inprogress" ) { @@ -84,7 +85,7 @@ jQuery.extend({ } fn.call(elem, function() { - jQuery.dequeue(elem, type); + jQuery.dequeue( elem, type ); }); } @@ -121,7 +122,7 @@ jQuery.fn.extend({ // Based off of the plugin by Clint Helfers, with permission. // http://blindsignals.com/index.php/2009/07/jquery-delay/ delay: function( time, type ) { - time = jQuery.fx ? jQuery.fx.speeds[time] || time : time; + time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time; type = type || "fx"; return this.queue( type, function() { diff --git a/test/unit/effects.js b/test/unit/effects.js index 3afc37f69..5bbb2d94a 100644 --- a/test/unit/effects.js +++ b/test/unit/effects.js @@ -428,19 +428,19 @@ test("animate duration 0", function() { $elem.remove(); }); -test("animate hyphenated properties", function(){ +test("animate hyphenated properties", function() { expect(1); stop(); jQuery("#foo") .css("font-size", 10) - .animate({"font-size": 20}, 200, function(){ + .animate({"font-size": 20}, 200, function() { equals( this.style.fontSize, "20px", "The font-size property was animated." ); start(); }); }); -test("animate non-element", function(){ +test("animate non-element", function() { expect(1); stop(); @@ -453,28 +453,42 @@ test("animate non-element", function(){ }); test("stop()", function() { - expect(3); + expect(4); stop(); var $foo = jQuery("#foo"); var w = 0; - $foo.hide().width(200).width(); - $foo.animate({ width: "show" }, 1000); - setTimeout(function(){ + $foo.hide().width(200) + .animate({ width: "show" }, 1000); + + setTimeout(function() { var nw = $foo.width(); notEqual( nw, w, "An animation occurred " + nw + "px " + w + "px"); $foo.stop(); nw = $foo.width(); notEqual( nw, w, "Stop didn't reset the animation " + nw + "px " + w + "px"); - setTimeout(function(){ + setTimeout(function() { $foo.removeData(); $foo.removeData(undefined, true); equals( nw, $foo.width(), "The animation didn't continue" ); start(); }, 100); }, 100); + + var $one = jQuery("#fadein"); + var $two = jQuery("#show"); + $one.fadeTo(100, 0, function() { + $one.stop(); + }); + setTimeout(function() { + $two.fadeTo(100, 0, function() { + equal( $two.css("opacity"), "0", "Stop does not interfere with animations on other elements (#6641)" ); + // Reset styles + $one.add( $two ).css("opacity", ""); + }); + }, 50); }); test("stop() - several in queue", function() { @@ -660,63 +674,63 @@ test("CSS Overflow and Display", function() { .animate({ opacity: 0.5 }, "slow", jQuery.checkOverflowDisplay); }); -jQuery.each( { - "CSS Auto": function(elem,prop){ - jQuery(elem).addClass("auto" + prop) - .text("This is a long string of text."); +jQuery.each({ + "CSS Auto": function( elem, prop ) { + jQuery( elem ).addClass( "auto" + prop ) + .text( "This is a long string of text." ); return ""; }, - "JS Auto": function(elem,prop){ - jQuery(elem).css(prop,"") - .text("This is a long string of text."); + "JS Auto": function( elem, prop ) { + jQuery( elem ).css( prop, "" ) + .text( "This is a long string of text." ); return ""; }, - "CSS 100": function(elem,prop){ - jQuery(elem).addClass("large" + prop); + "CSS 100": function( elem, prop ) { + jQuery( elem ).addClass( "large" + prop ); return ""; }, - "JS 100": function(elem,prop){ - jQuery(elem).css(prop,prop == "opacity" ? 1 : "100px"); - return prop == "opacity" ? 1 : 100; + "JS 100": function( elem, prop ) { + jQuery( elem ).css( prop, prop === "opacity" ? 1 : "100px" ); + return prop === "opacity" ? 1 : 100; }, - "CSS 50": function(elem,prop){ - jQuery(elem).addClass("med" + prop); + "CSS 50": function( elem, prop ) { + jQuery( elem ).addClass( "med" + prop ); return ""; }, - "JS 50": function(elem,prop){ - jQuery(elem).css(prop,prop == "opacity" ? 0.50 : "50px"); - return prop == "opacity" ? 0.5 : 50; + "JS 50": function( elem, prop ) { + jQuery( elem ).css( prop, prop === "opacity" ? 0.50 : "50px" ); + return prop === "opacity" ? 0.5 : 50; }, - "CSS 0": function(elem,prop){ - jQuery(elem).addClass("no" + prop); + "CSS 0": function( elem, prop ) { + jQuery( elem ).addClass( "no" + prop ); return ""; }, - "JS 0": function(elem,prop){ - jQuery(elem).css(prop,prop == "opacity" ? 0 : "0px"); + "JS 0": function( elem, prop ) { + jQuery( elem ).css( prop, prop === "opacity" ? 0 : "0px" ); return 0; } }, function( fn, f ) { jQuery.each({ - "show": function(elem,prop){ - jQuery(elem).hide().addClass("wide"+prop); + "show": function( elem, prop ) { + jQuery( elem ).hide( ).addClass( "wide" + prop ); return "show"; }, - "hide": function(elem,prop){ - jQuery(elem).addClass("wide"+prop); + "hide": function( elem, prop ) { + jQuery( elem ).addClass( "wide" + prop ); return "hide"; }, - "100": function(elem,prop){ - jQuery(elem).addClass("wide"+prop); + "100": function( elem, prop ) { + jQuery( elem ).addClass( "wide" + prop ); return prop == "opacity" ? 1 : 100; }, - "50": function(elem,prop){ + "50": function( elem, prop ) { return prop == "opacity" ? 0.50 : 50; }, - "0": function(elem,prop){ - jQuery(elem).addClass("noback"); + "0": function( elem, prop ) { + jQuery( elem ).addClass( "noback" ); return 0; } - }, function(tn, t){ + }, function( tn, t ) { test(fn + " to " + tn, function() { var elem = jQuery.makeTest( fn + " to " + tn ); @@ -735,35 +749,44 @@ jQuery.each( { if ( t_h == "show" ) num++; if ( t_w == "show" ) num++; - if ( t_w == "hide"||t_w == "show" ) num++; - if ( t_h == "hide"||t_h == "show" ) num++; - if ( t_o == "hide"||t_o == "show" ) num++; + if ( t_w == "hide" || t_w == "show" ) num++; + if ( t_h == "hide" || t_h == "show" ) num++; + if ( t_o == "hide" || t_o == "show" ) num++; if ( t_w == "hide" ) num++; if ( t_o.constructor == Number ) num += 2; if ( t_w.constructor == Number ) num += 2; if ( t_h.constructor == Number ) num +=2; - expect(num); + expect( num ); stop(); var anim = { width: t_w, height: t_h, opacity: t_o }; elem.animate(anim, 50); - jQuery.when( elem ).done(function( elem ){ + jQuery.when( elem ).done(function( elem ) { elem = elem[ 0 ]; 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" ) { + // 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" ) { + // 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); + equals( elem.style.display, "block", "Showing, display should block: " + elem.style.display ); } - 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); + 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 ); } - 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); + 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 ); } var cur_o = jQuery.style(elem, "opacity"); @@ -782,49 +805,56 @@ jQuery.each( { cur_o = 1; } + // if ( t_o == "hide" || t_o == "show" ) { + // equals(cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o); + // } + + // if ( t_w == "hide" ) { + // equals(elem.style.display, "none", "Hiding, display should be none: " + elem.style.display); + 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" ) { - 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 ) { - 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 ); - ok(jQuery.css(elem, "opacity") != "" || cur_o == t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o); + ok( jQuery.css(elem, "opacity") != "" || cur_o == t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o ); } if ( t_w.constructor == Number ) { - equals(elem.style.width, t_w + "px", "Final width should be " + t_w + ": " + elem.style.width); + equals( elem.style.width, t_w + "px", "Final width should be " + t_w + ": " + elem.style.width ); - var cur_w = jQuery.css(elem,"width"); + var cur_w = jQuery.css( elem,"width" ); - ok(elem.style.width != "" || cur_w == t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w); + ok( elem.style.width != "" || cur_w == t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w ); } if ( t_h.constructor == Number ) { - equals(elem.style.height, t_h + "px", "Final height should be " + t_h + ": " + elem.style.height); + equals( elem.style.height, t_h + "px", "Final height should be " + t_h + ": " + elem.style.height ); - var cur_h = jQuery.css(elem,"height"); + var cur_h = jQuery.css( elem,"height" ); - ok(elem.style.height != "" || cur_h == t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w); + ok( elem.style.height != "" || cur_h == t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w ); } if ( t_h == "show" ) { - var old_h = jQuery.css(elem, "height"); - jQuery(elem).append("
Some more text
and some more..."); + var old_h = jQuery.css( elem, "height" ); + jQuery( elem ).append("
Some more text
and some more..."); if ( /Auto/.test( fn ) ) { - notEqual(jQuery.css(elem, "height"), old_h, "Make sure height is auto."); + notEqual( jQuery.css( elem, "height" ), old_h, "Make sure height is auto." ); } else { - equals(jQuery.css(elem, "height"), old_h, "Make sure height is not auto."); + equals( jQuery.css( elem, "height" ), old_h, "Make sure height is not auto." ); } } // manually remove generated element - jQuery(elem).remove(); + jQuery( elem ).remove(); start(); }); @@ -832,7 +862,7 @@ jQuery.each( { }); }); -jQuery.fn.saveState = function(hiddenOverflow){ +jQuery.fn.saveState = function( hiddenOverflow ) { var check = ["opacity", "height", "width", "display", "overflow"]; expect(check.length); @@ -840,83 +870,83 @@ jQuery.fn.saveState = function(hiddenOverflow){ return this.each(function(){ var self = this; self.save = {}; - jQuery.each(check, function(i,c){ - self.save[c] = c === "overflow" && hiddenOverflow ? "hidden" : self.style[ c ] || jQuery.css(self,c); + jQuery.each(check, function( i, c ) { + self.save[ c ] = c === "overflow" && hiddenOverflow ? "hidden" : self.style[ c ] || jQuery.css( self, c ); }); }); }; -jQuery.checkState = function(){ +jQuery.checkState = function() { var self = this; - jQuery.each(this.save, function(c,v){ - var cur = self.style[ c ] || jQuery.css(self, c); + jQuery.each(this.save, function( c, v ) { + var cur = self.style[ c ] || jQuery.css( self, c ); equals( cur, v, "Make sure that " + c + " is reset (Old: " + v + " Cur: " + cur + ")"); }); // manually clean data on modified element - jQuery.removeData(this, "olddisplay", true); + jQuery.removeData( this, "olddisplay", true ); start(); }; // Chaining Tests test("Chain fadeOut fadeIn", function() { - jQuery("#fadein div").saveState().fadeOut("fast").fadeIn("fast",jQuery.checkState); + jQuery("#fadein div").saveState().fadeOut("fast").fadeIn("fast", jQuery.checkState ); }); test("Chain fadeIn fadeOut", function() { - jQuery("#fadeout div").saveState().fadeIn("fast").fadeOut("fast",jQuery.checkState); + jQuery("#fadeout div").saveState().fadeIn("fast").fadeOut("fast", jQuery.checkState ); }); test("Chain hide show", function() { - jQuery("#show div").saveState(jQuery.support.shrinkWrapBlocks).hide("fast").show("fast",jQuery.checkState); + jQuery("#show div").saveState( jQuery.support.shrinkWrapBlocks ).hide("fast").show("fast", jQuery.checkState ); }); test("Chain show hide", function() { - jQuery("#hide div").saveState(jQuery.support.shrinkWrapBlocks).show("fast").hide("fast",jQuery.checkState); + jQuery("#hide div").saveState( jQuery.support.shrinkWrapBlocks ).show("fast").hide("fast", jQuery.checkState ); }); test("Chain show hide with easing and callback", function() { - jQuery("#hide div").saveState().show("fast").hide("fast","linear",jQuery.checkState); + jQuery("#hide div").saveState().show("fast").hide("fast","linear", jQuery.checkState ); }); test("Chain toggle in", function() { - jQuery("#togglein div").saveState(jQuery.support.shrinkWrapBlocks).toggle("fast").toggle("fast",jQuery.checkState); + jQuery("#togglein div").saveState( jQuery.support.shrinkWrapBlocks ).toggle("fast").toggle("fast", jQuery.checkState ); }); test("Chain toggle out", function() { - jQuery("#toggleout div").saveState(jQuery.support.shrinkWrapBlocks).toggle("fast").toggle("fast",jQuery.checkState); + jQuery("#toggleout div").saveState( jQuery.support.shrinkWrapBlocks ).toggle("fast").toggle("fast", jQuery.checkState ); }); test("Chain toggle out with easing and callback", function() { - jQuery("#toggleout div").saveState(jQuery.support.shrinkWrapBlocks).toggle("fast").toggle("fast","linear",jQuery.checkState); + jQuery("#toggleout div").saveState( jQuery.support.shrinkWrapBlocks ).toggle("fast").toggle("fast","linear", jQuery.checkState ); }); test("Chain slideDown slideUp", function() { - jQuery("#slidedown div").saveState(jQuery.support.shrinkWrapBlocks).slideDown("fast").slideUp("fast",jQuery.checkState); + jQuery("#slidedown div").saveState( jQuery.support.shrinkWrapBlocks ).slideDown("fast").slideUp("fast", jQuery.checkState ); }); test("Chain slideUp slideDown", function() { - jQuery("#slideup div").saveState(jQuery.support.shrinkWrapBlocks).slideUp("fast").slideDown("fast",jQuery.checkState); + jQuery("#slideup div").saveState( jQuery.support.shrinkWrapBlocks ).slideUp("fast").slideDown("fast", jQuery.checkState ); }); test("Chain slideUp slideDown with easing and callback", function() { - jQuery("#slideup div").saveState(jQuery.support.shrinkWrapBlocks).slideUp("fast").slideDown("fast","linear",jQuery.checkState); + jQuery("#slideup div").saveState( jQuery.support.shrinkWrapBlocks ).slideUp("fast").slideDown("fast","linear", jQuery.checkState ); }); test("Chain slideToggle in", function() { - jQuery("#slidetogglein div").saveState(jQuery.support.shrinkWrapBlocks).slideToggle("fast").slideToggle("fast",jQuery.checkState); + jQuery("#slidetogglein div").saveState( jQuery.support.shrinkWrapBlocks ).slideToggle("fast").slideToggle("fast", jQuery.checkState ); }); test("Chain slideToggle out", function() { - jQuery("#slidetoggleout div").saveState(jQuery.support.shrinkWrapBlocks).slideToggle("fast").slideToggle("fast",jQuery.checkState); + jQuery("#slidetoggleout div").saveState( jQuery.support.shrinkWrapBlocks ).slideToggle("fast").slideToggle("fast", jQuery.checkState ); }); test("Chain fadeToggle in", function() { - jQuery("#fadetogglein div").saveState().fadeToggle("fast").fadeToggle("fast",jQuery.checkState); + jQuery("#fadetogglein div").saveState().fadeToggle("fast").fadeToggle("fast", jQuery.checkState ); }); test("Chain fadeToggle out", function() { - jQuery("#fadetoggleout div").saveState().fadeToggle("fast").fadeToggle("fast",jQuery.checkState); + jQuery("#fadetoggleout div").saveState().fadeToggle("fast").fadeToggle("fast", jQuery.checkState ); }); test("Chain fadeTo 0.5 1.0 with easing and callback)", function() { - jQuery("#fadeto div").saveState().fadeTo("fast",0.5).fadeTo("fast",1.0,"linear",jQuery.checkState); + jQuery("#fadeto div").saveState().fadeTo("fast",0.5).fadeTo("fast",1.0,"linear", jQuery.checkState ); }); jQuery.makeTest = function( text ){ var elem = jQuery("
") - .attr("id", "test" + jQuery.makeTest.id++) + .attr( "id", "test" + jQuery.makeTest.id++ ) .addClass("box"); jQuery("

") @@ -944,6 +974,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(){ expect(5); -- 2.39.5