jQuery cancelling and resetting slide animations
I'm writing some jQuery for toggling divs that, in pseudo code, should do the following:

    item.click
        check to see if the div I want to expand is hidden
        if so
            slideup all of the divs
            when finished...
            slide down the one I want to expose


There are multiple items that can be clicked (in this particular case, radio buttons).

I can get all this working (thanks to some help from the fine folks here on stockOverflow).

The one bug I still have is that if one clicks an item and then, before the process finishes, click another item, the animations begin stacking and getting confused. And I can break the display by quickly clicking back and forth between the trigger items. I've tried to fix this by implementing a 'when clicked, if things are animating, stop, and then hide them all to reset things':

	$('.toggleTriggersWrapper .toggleTrigger')
		.click(function(){
			
			var $togglePanesWrapper = $(this).closest('.toggleTriggersWrapper').next('.togglePanesWrapper').eq(0);

			var IDtoShow = '#' + this.className.match(/toggle\-.+?\b/);
			var $IDtoShow = $(IDtoShow);

            /* the next 3 lines are my attempted 'fix' */
			if($togglePanesWrapper.children('.togglePane').is(":animated")) {
				$togglePanesWrapper.children('.togglePane').hide().stop();
			};
			
	        $togglePanesWrapper.children('.togglePane').not(IDtoShow).slideUp('fast', function(){

					/* great fix for dealing with multiple animations as found here: http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/ */
					var wait = setInterval(function() {
						if( !$togglePanesWrapper.children('.togglePane').is(":animated") ) {
							console.log('if is animated');
							clearInterval(wait);
							$togglePanesWrapper.children('.togglePane').not(IDtoShow).hide();
							$togglePanesWrapper.children(IDtoShow).slideDown('slow');
						}
					}, 200);				
				
				});
		})	


What happens with the above fix is that the animations DO stop, but the height of my toggling divs gets 'stuck' at the point they were told to stop. It's as if the div was sliding down, I click a different item which triggers the 'stop' and, as such, that div is now thinking it's only half as tall as it really is.

Any ideas of a workaround for this?

jQuery cancelling and resetting slide animations
===

I'm writing some jQuery for toggling divs that, in pseudo code, should do the following:

    item.click
        check to see if the div I want to expand is hidden
        if so
            slideup all of the divs
            when finished...
            slide down the one I want to expose


There are multiple items that can be clicked (in this particular case, radio buttons).

I can get all this working (thanks to some help from the fine folks here on stockOverflow).

The one bug I still have is that if one clicks an item and then, before the process finishes, click another item, the animations begin stacking and getting confused. And I can break the display by quickly clicking back and forth between the trigger items. I've tried to fix this by implementing a 'when clicked, if things are animating, stop, and then hide them all to reset things':

	$('.toggleTriggersWrapper .toggleTrigger')
		.click(function(){
			
			var $togglePanesWrapper = $(this).closest('.toggleTriggersWrapper').next('.togglePanesWrapper').eq(0);

			var IDtoShow = '#' + this.className.match(/toggle\-.+?\b/);
			var $IDtoShow = $(IDtoShow);

            /* the next 3 lines are my attempted 'fix' */
			if($togglePanesWrapper.children('.togglePane').is(":animated")) {
				$togglePanesWrapper.children('.togglePane').hide().stop();
			};
			
	        $togglePanesWrapper.children('.togglePane').not(IDtoShow).slideUp('fast', function(){

					/* great fix for dealing with multiple animations as found here: http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/ */
					var wait = setInterval(function() {
						if( !$togglePanesWrapper.children('.togglePane').is(":animated") ) {
							console.log('if is animated');
							clearInterval(wait);
							$togglePanesWrapper.children('.togglePane').not(IDtoShow).hide();
							$togglePanesWrapper.children(IDtoShow).slideDown('slow');
						}
					}, 200);				
				
				});
		})	


What happens with the above fix is that the animations DO stop, but the height of my toggling divs gets 'stuck' at the point they were told to stop. It's as if the div was sliding down, I click a different item which triggers the 'stop' and, as such, that div is now thinking it's only half as tall as it really is.

Any ideas of a workaround for this?
