jQuery 等待一个动画完成后再开始另一个动画

Question

我有一组选项卡，这些选项卡会导致某些带有选项的 DIV 在父 DIV 顶部“飞出”。内容通过 AJAX 获取。

弹出窗口是在单击时调用的，所以

$('.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;

});

我有一个关闭弹出窗口的函数：

function closeFlyout() {

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

};

当单击另一个弹出窗口选项卡以及单击弹出窗口本身中包含的关闭按钮时会调用该函数：

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

    closeFlyout();

    return false;

});

我想扩展它，以便如果某个浮出控件已打开，并且用户单击以初始化另一个浮出控件，则打开的浮出控件会以动画方式关闭，但新的浮出控件会等待此动画完成，然后再显示新的浮出控件。

Answer 1

如果弹出窗口打开时发出信号的全局变量怎么样？然后使用计时器调用单击事件，直到动画完成。

//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

如果你添加一个怎么样

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