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()