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

如果展開彈出窗口，全局變量會發出什麼信號？然後使用計時器調用click事件，直到動畫完成。

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