让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（）没有。当$（），但也不能工作。我使用淡入/淡出的回调/完整的功能也试过，但我不能这样做，因为有已被点击那里既没有的情况下（当第一次加载页面），所以我就不能在另一个函数传递。任何帮助将非常感激，我一直停留在这几天！

Answer 1

您可以检查是否一个元素是否正在动画：

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

或者干脆stop()任何正在进行的动画和清除队列：

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

Answer 2

使用函数回调非常简单的方法。

DEMO HERE

你看让我解释一下你。有了这样淡出和淡入功能，你可以使用这样的回调：

$(function () {
        $('.btn').on('click', function () {
            $('.one').fadeOut('slow', function () {
                $('.two').fadeIn('slow');
            });
        });
    });

因此，一旦淡出完成后，它会触发淡入（）。