[SOLVED] How do I stop a toggle during an animation?

[SOLVED] How do I stop a toggle during an animation?

window.$globals = {
    currentPage : '#idPageBlock_Main',
    lastPage : '#idPageBlock_Main'
};

$(document).ready(function() {
    $('#idProducts_Link').toggle(function() {
        $($globals.currentPage).hide('slow');
        $('div#idWorkholdSampler').animate({top:-650, left:20}, 'slow');
        $('div#idMoldSampler').animate({top:-430, left:20}, 'slow');
        $('div#idFixtureSampler').animate({top:-210, left:20}, 'slow');
        $('#idProducts_Link .menu').removeClass('menu_unclicked');
        $('#idProducts_Link .menu').addClass('menu_clicked');
        $('#idWorkholdSampler').animate({width:718}, 'slow', function() {
            $('#idWorkholdSamplerBody').slideDown('slow', function() {
                $('#idMoldSampler').animate({width:718}, 'slow', function() {
                    $('#idMoldSamplerBody').slideDown('slow', function() {            
                        $('#idFixtureSampler').animate({width:718},'slow', function() {
                            $('#idFixtureSamplerBody').slideDown('slow');
                            });
                        });
                    });
                });                                 
            });
        $globals.lastPage = $globals.currentPage;
        $globals.currentPage = '#idPageBlock_Products';
    }, function() {
        $('#idProducts_Link .menu').removeClass('menu_clicked');      
        $('#idProducts_Link .menu').addClass('menu_unclicked');   
        $('#idFixtureSamplerBody').slideUp('fast',function() {
            $('#idFixtureSampler').animate({width:150},'fast', function() {
                $('#idMoldSamplerBody').slideUp('fast',function() {
                    $('#idMoldSampler').animate({width:150},'fast',function() {
                        $('#idWorkholdSamplerBody').slideUp('fast', function() {
                            $('#idWorkholdSampler').animate({width:150},'fast',function() {
                                $('div#idWorkholdSampler').animate({top:0, left:303}, 'fast');
                                $('div#idMoldSampler').animate({top:0, left:70}, 'fast');
                                $('div#idFixtureSampler').animate({top:0, left:536}, 'fast');
                                $($globals.lastPage).show('fast');
                                var wait = $globals.currentPage;
                                $globals.currentPage = $globals.lastPage;
                                $globals.lastPage = wait;
                                });
                            });
                        });
                    });
                });
            });
        });
    });


This works perfectly if I wait until the animations inside of the toggle to complete before I click again. If I don't wait the original animations stop and the animations for the second click start leaving an undesirable outcome.

I've tried adding an is(':animated') conditional after the toggle before the animations start.


$(document).ready(function() {
    $('#idProducts_Link').toggle(function() {
        if(! (($('#idSamplerCenterWrapper').children.is(':animated')) || ($('#idSamplerCenterWrapper').children().children().is(':animated'))) ) {
            ...


This seems to work in stopping the inside of the toggle from going off if my divs are animated, but it doesn't stop the toggle from changing it's state. In other words, I click the animation starts. Half way though the animation I click again. The animation doesn't change, it continues as I want it to but the toggle now thinks I have made a second click. When I click again the page does nothing because it thinks I'm on a first click again

I've tried adding the conditional before the toggle:


$(document).ready(function() {
    if(! (($('#idSamplerCenterWrapper').children.is(':animated')) || ($('#idSamplerCenterWrapper').children().children().is(':animated'))) ) {
        $('#idProducts_Link').toggle(function() {
            ...


But in this case I get nothing. It's weird too. When I create a second button to alert() me with the condition of both of my is(':animated') statements, I get returned the condition I want, "false" and "false". If I replace the is(':animated') statements in my conditional with "fales"


$(document).ready(function() {
    if (! (false || false)) {
        $('#idProducts_Link').toggle(function() {
            ...


Then my toggle is called on the click.

Is there a better way to do this? I've tried the unbind method as well. I added the unbind call right after the toggle:


$(document).ready(function() {
    $('#idProducts_Link').toggle(function() {
        $('#idProducts_Link').unbind('toggle').unbind('click');
        $($globals.currentPage).hide('slow');
        ...


and a rebind in the callback of the last statement in my code.

                    ...
                        $('#idFixtureSampler').animate({width:718},'slow', function() {
                            $('#idFixtureSamplerBody').slideDown('slow', function() {
                                $('#idProducts_Link').bind('toggle').bind('click');
                                });
                            });
                        });
                    ...


This works for the first click and stops other clicks from occuring and changing the state of the toggle, but it doesn't rebind. After my open animation is complete I try to click again and nothing happens except for an obscure JS error. Something about 'guid' and being defined on a line that's no where near the line numbers of my code.

Can someone explain to me how I might go about stopping a user from calling the second part of the toggle until the first part is complete and visa versa from the first part until the second animation is complete?

Thanks.

-Craig