Accordion: New approach to synchronizing animations. Fixes #4178 - Accordion animation a bit jumpy in some browsers.

1 files changed, 23 insertions, 17 deletions

diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js
index 8bf3e4388..bc3cbfcc6 100644
--- a/ui/jquery.ui.accordion.js
+++ b/ui/jquery.ui.accordion.js
@@ -16,20 +16,12 @@
 
 var uid = 0,
 	hideProps = {},
-	showProps = {},
-	showPropsAdjust = {};
+	showProps = {};
 
 hideProps.height = hideProps.paddingTop = hideProps.paddingBottom =
 	hideProps.borderTopWidth = hideProps.borderBottomWidth = "hide";
 showProps.height = showProps.paddingTop = showProps.paddingBottom =
 	showProps.borderTopWidth = showProps.borderBottomWidth = "show";
-$.extend( showPropsAdjust, showProps, { accordionHeight: "show" } );
-
-$.fx.step.accordionHeight = function( fx ) {
-	var elem = $( fx.elem ),
-		data = elem.data( "ui-accordion-height" );
-	elem.height( data.total - elem.outerHeight() - data.toHide.outerHeight() + elem.height() );
-};
 
 $.widget( "ui.accordion", {
 	version: "@VERSION",
@@ -485,12 +477,12 @@ $.widget( "ui.accordion", {
 	_animate: function( toShow, toHide, data ) {
 		var total, easing, duration,
 			that = this,
+			adjust = 0,
 			down = toShow.length &&
 				( !toHide.length || ( toShow.index() < toHide.index() ) ),
 			animate = this.options.animate || {},
 			options = down && animate.down || animate,
 			complete = function() {
-				toShow.removeData( "ui-accordion-height" );
 				that._toggleComplete( data );
 			};
 
@@ -512,15 +504,29 @@ $.widget( "ui.accordion", {
 		}
 
 		total = toShow.show().outerHeight();
-		toHide.animate( hideProps, duration, easing );
+		toHide.animate( hideProps, {
+			duration: duration,
+			easing: easing,
+			step: function( now, fx ) {
+				fx.now = Math.round( now );
+			}
+		});
 		toShow
 			.hide()
-			.data( "ui-accordion-height", {
-				total: total,
-				toHide: toHide
-			})
-			.animate( this.options.heightStyle === "content" ? showProps : showPropsAdjust,
-				duration, easing, complete );
+			.animate( showProps, {
+				duration: duration,
+				easing: easing,
+				complete: complete,
+				step: function( now, fx ) {
+					if ( fx.prop !== "height" ) {
+						fx.now = Math.round( now );
+						adjust += fx.now;
+					} else {
+						fx.now = Math.round( total - toHide.outerHeight() - adjust );
+						adjust = 0;
+					}
+				}
+			});
 	},
 
 	_toggleComplete: function( data ) {