Accordion: Stop current hide animation, jump to last animation and calculate percentages for padding in addition to height. Fixes #3532 - Accordion: Activating a panel during animation fails

This commit is contained in:
kborchers 2011-07-20 08:19:01 -05:00
parent fb210ae1ec
commit 5f02a8ff1f

View File

@ -13,6 +13,8 @@
*/
(function( $, undefined ) {
var lastToggle = {};
// TODO: use ui-accordion-header-active class and fix styling
$.widget( "ui.accordion", {
version: "@VERSION",
@ -37,8 +39,6 @@ $.widget( "ui.accordion", {
var self = this,
options = self.options;
self.running = false;
self.element.addClass( "ui-accordion ui-widget ui-helper-reset" );
self.headers = self.element.find( options.header )
@ -319,8 +319,6 @@ $.widget( "ui.accordion", {
event.preventDefault();
if ( options.disabled ||
// can't switch during an animation
this.running ||
// click on active header, but not collapsible
( clickedIsActive && !options.collapsible ) ||
// allow canceling activation
@ -361,7 +359,6 @@ $.widget( "ui.accordion", {
toShow = data.newContent,
toHide = data.oldContent;
self.running = true;
function complete() {
self._completed( data );
}
@ -382,6 +379,8 @@ $.widget( "ui.accordion", {
animations[ animation ]({
toShow: toShow,
toHide: toHide,
prevShow: lastToggle.toShow,
prevHide: lastToggle.toHide,
complete: complete,
down: toShow.length && ( !toHide.length || ( toShow.index() < toHide.index() ) )
}, additional );
@ -412,8 +411,6 @@ $.widget( "ui.accordion", {
var toShow = data.newContent,
toHide = data.oldContent;
this.running = false;
if ( this.options.heightStyle === "content" ) {
toShow.add( toHide ).css({
height: "",
@ -435,6 +432,11 @@ $.widget( "ui.accordion", {
$.extend( $.ui.accordion, {
animations: {
slide: function( options, additions ) {
if ( options.prevShow || options.prevHide ) {
options.prevHide.stop( true, true );
options.toHide = options.prevShow;
}
var showOverflow = options.toShow.css( "overflow" ),
hideOverflow = options.toHide.css( "overflow" ),
percentDone = 0,
@ -446,6 +448,9 @@ $.extend( $.ui.accordion, {
easing: "swing",
duration: 300
}, options, additions );
lastToggle = options;
if ( !options.toHide.size() ) {
originalWidth = options.toShow[0].style.width;
options.toShow
@ -502,10 +507,7 @@ $.extend( $.ui.accordion, {
.filter( ":visible" )
.animate( hideProps, {
step: function( now, settings ) {
// only calculate the percent when animating height
// IE gets very inconsistent results when animating elements
// with small values, which is common for padding
if ( settings.prop == "height" ) {
if ( settings.prop == "height" || settings.prop == "paddingTop" || settings.prop == "paddingBottom" ) {
percentDone = ( settings.end - settings.start === 0 ) ? 0 :
( settings.now - settings.start ) / ( settings.end - settings.start );
}