jQuery 等到一个动画完成后再开始另一个动画答案

【问题标题】：jQuery waiting until one animation has finished prior to starting anotherjQuery 等到一个动画完成后再开始另一个动画
【发布时间】：2023-03-17 05:40:02
【问题描述】：

我有一组选项卡会导致某些带有选项的 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;

});

我想扩展它，以便如果一个飞出是打开的并且用户单击以初始化另一个飞出，那么打开的飞出动画会关闭，但新的飞出会等待此动画完成，然后再显示新的飞出。

【问题讨论】：

标签： jquery jquery-animate

【解决方案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;
}

});

【讨论】：

【解决方案2】：

如果你添加一个

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

【讨论】：