jquery - 让 Jquery 函数等待动画完成

Question

我知道这个问题已经被问了很多，但我似乎仍然找不到答案。我的标题中有两个单独的 div，当单击其中一个时，它会在页面的主要部分中淡入一些内容。我正在尝试这样做，以便如果已经单击了一个，则新的必须等待旧的淡出才能淡入。我的问题是，它不等待旧的淡出，而是在右侧淡入离开。我省略了 page_2 的函数，但它们是相同的，只是交换了适当的标识符和变量。

var about_me_clicked = false;
var page_2_clicked = false;

$(document).ready(function() {
$('#About_me').click(about_me_clicked_func);
$('#Page_2').click(page_2_clicked_func);

var about_me_clicked_func = function() {  
  if(page_2_clicked){
      $.when(toggle_page_2()).done(toggle_about_me());
      page_2_clicked = !page_2_clicked;
  }
  else toggle_about_me();
  about_me_clicked = !about_me_clicked;
}

var toggle_about_me = function() {
  //do some formatting....
  if (!about_me_clicked) {
      return $('#About_me_main').fadeIn('slow').promise();
  }
  else return $('#About_me_main').fadeOut('slow').promise();

我尝试只使用 .done() 而不使用 $.when() ，但这也不起作用。我还尝试对 fadeIn/fadeOut 使用回调/完整函数，但我不能这样做，因为在某些情况下，两者都没有被单击(当页面首次加载时)，因此我无法传递另一个函数。任何帮助将不胜感激，我已经坚持了好几天了!

Answer 1

您可以检查某个元素当前是否正在动画:

if($('#About_me_main').is(':animated'))

或者简单地stop()任何正在进行的动画并清除队列:

$('#About_me_main').stop(true).fadeIn('slow');