From 2510b74541dbf7ce19f0493e7ba5f86b669523ae Mon Sep 17 00:00:00 2001 From: ddstreet Date: Fri, 21 Oct 2011 23:55:16 -0400 Subject: [PATCH] animateClass: fix to not overwrite css nor class settings changed during animation. Fixed #7106 - animateClass: css and class changes during animation are lost --- tests/unit/effects/effects.html | 10 ++++++++++ tests/unit/effects/effects_core.js | 10 +++++++++- ui/jquery.effects.core.js | 32 +++++++++++++++--------------- 3 files changed, 35 insertions(+), 17 deletions(-) diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index f2c447ef7cd..8508550f62c 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -75,6 +75,14 @@ height: 50px; } + .ticket7106 { + width: 50px; + opacity: 1; + } + .ticket7106.animate { + width: 100px; + } + @@ -94,6 +102,8 @@

Slide with relative width

+
+
diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 1e5da211336..727556a6dd8 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -159,6 +159,14 @@ test( "createWrapper and removeWrapper retain focused elements (#7595)", functio equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" ); $.effects.removeWrapper( test ); equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" ); -}) +}); + +asyncTest( "animateClass: css and class changes during animation are not lost (#7106)", function() { + $( "div.ticket7106" ).addClass( "animate", 300, function() { + equal( $(this).css( "opacity" ), "0.5", "css change during animateClass was lost" ); + ok( $(this).hasClass( "testClass" ), "class change during animateClass was lost" ); + start(); + }).addClass( "testClass" ).css( { opacity: "0.5" } ); +}); })(jQuery); diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 3dc0a4e6710..a47880e7ff8 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -224,7 +224,7 @@ $.effects.animateClass = function( value, duration, easing, callback ) { return this.queue( function() { var animated = $( this ), baseClass = animated.attr( "class" ) || "", - finalClass, + applyClassChange, allAnimations = o.children ? animated.find( "*" ).andSelf() : animated; // map the animated objects to store the original styles. @@ -232,18 +232,19 @@ $.effects.animateClass = function( value, duration, easing, callback ) { var el = $( this ); return { el: el, - originalStyleAttr: el.attr( "style" ) || " ", start: getElementStyles.call( this ) }; }); // apply class change - $.each( classAnimationActions, function(i, action) { - if ( value[ action ] ) { - animated[ action + "Class" ]( value[ action ] ); - } - }); - finalClass = animated.attr( "class" ); + applyClassChange = function() { + $.each( classAnimationActions, function(i, action) { + if ( value[ action ] ) { + animated[ action + "Class" ]( value[ action ] ); + } + }); + }; + applyClassChange(); // map all animated objects again - calculate new styles and diff allAnimations = allAnimations.map(function() { @@ -275,16 +276,15 @@ $.effects.animateClass = function( value, duration, easing, callback ) { $.when.apply( $, allAnimations.get() ).done(function() { // set the final class - animated.attr( "class", finalClass ); + applyClassChange(); - // for each animated element + // for each animated element, + // clear all css properties that were animated $.each( arguments, function() { - if ( typeof this.el.attr( "style" ) === "object" ) { - this.el.attr( "style" ).cssText = ""; - this.el.attr( "style" ).cssText = this.originalStyleAttr; - } else { - this.el.attr( "style", this.originalStyleAttr ); - } + var el = this.el; + $.each( this.diff, function(key) { + el.css( key, '' ); + }); }); // this is guarnteed to be there if you use jQuery.speed()