jQuery cancelling and resetting slide animations

Question

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?

Answer 1

You need to pass additional parameters to the stop method:

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

The first parameter (clearQueue) tells jQuery to clear the animation queue, stopping any queued animations.

The second parameter (gotoEnd) tells jQuery to complete the current animation.

Answer 2

The newer post is correct... you shoudl just clear the queue ive changeed my answer to reflect this as well.

try:

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

http://docs.jquery.com/Effects/stop