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

This commit is contained in:
Scott González 2012-10-01 16:25:23 -04:00
parent 4ab4684cfc
commit d20f05ea37

View File

@ -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 ) {