jQuery waiting until one animation has finished prior to starting another

Question

I have a set of tabs which cause certain DIVs with options to 'fly out' over the top of a parent DIV. The content is pulled in via AJAX.

The fly outs are called on click like so

$('.fly_out').live('click', function() {

    var $widget = $(this).closest('.widget');

    var $flyOutIndex = $(this).index('.fly_out');

    if ($flyOutIndex == 0) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/Priceassessment/product_order.htm';
    } else if ($flyOutIndex == 1) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_comparisons.htm';
    } else if ($flyOutIndex == 2) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_scenarios.htm';
    } else if ($flyOutIndex == 3) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_analysis.htm';
    }

    // Close any open flyouts
    closeFlyout();

    $.ajax({
        type: 'GET',
        url: DashboardApplicationRoot + $flyOutURL,
        dataType: 'html',
        cache: false,
        success: function(data) {

            $($widget).prepend(data);

            $('.fly_container').animate({ 'right': '0' }, 'fast');

            $('.scroll').jScrollPane();

            $('.striped li:nth-child(even)').addClass('odd');
        }
    });

    return false;

});

I have a function to close the flyouts:

function closeFlyout() {

    $('.fly_container').animate({
        'right': '-332'
    }, 'fast', 'swing', function() {
        $(this).detach();
    });

};

Which is called when another fly out tab is clicked and also when clicking a close button contained within the fly out itself:

$('.fly_container .close').live('click', function() {

    closeFlyout();

    return false;

});

I would like to extend this so that if a fly out is open and a user clicks to initialise another flyout, then the open flyout animates shut but the new fly out waits for this animation to finish before showing the new fly out.

Answer 1

What about a global var that signals if a flyout is open? Then use a timer to invoke the click event until the animation completes.

//Global space

var flyOutActive = false;


//Close Function

function closeFlyout() {

    $('.fly_container').animate({
        'right': '-332'
    }, 'fast', 'swing', function() {
        $(this).detach();
//update active flag
flyOutActive = false;

    });

};


//Ajax call

$('.fly_out').live('click', function() {

if(flyOutActive)
{
  //Recursive function call  waits for animation to complete
  setTimer($('.fly_out').click(),100)

}
else
{
    var $widget = $(this).closest('.widget');

    var $flyOutIndex = $(this).index('.fly_out');

    if ($flyOutIndex == 0) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/Priceassessment/product_order.htm';
    } else if ($flyOutIndex == 1) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_comparisons.htm';
    } else if ($flyOutIndex == 2) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_scenarios.htm';
    } else if ($flyOutIndex == 3) {
        $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_analysis.htm';
    }

    // Close any open flyouts
    closeFlyout();

    $.ajax({
        type: 'GET',
        url: DashboardApplicationRoot + $flyOutURL,
        dataType: 'html',
        cache: false,
        success: function(data) {

            $($widget).prepend(data);

            $('.fly_container').animate({ 'right': '0' }, 'fast');

            $('.scroll').jScrollPane();

            $('.striped li:nth-child(even)').addClass('odd');

             flyOutActive = true;
        }
    });

    return false;
}

});

Answer 2

how about if you add an

if(.fly_out:animated) { 
   //  do something if it's already animated 
} else {
   //do the action if it's not animated
}