使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使用回调/完成函数，但我无法这样做，因为有一种情况，即在页面首次加载时两者都没有被点击，所以我将无法传入另一个函数。任何帮助都将不胜感激，我已经卡在这里几天了！

- mtveezy

---

你能否使用 setInterval JS 函数来进行同步？ - nur

我不太确定你在问什么，但我想使用一种不依赖于等待一定时间的方法，因为如果我想编辑动画时间，我必须改变那个时间，我觉得那不是解决这个问题的正确方式。 - mtveezy

我的想法是保持一个变量，当第一个动画开始时将其设置为true。当点击第二个div时，它会检查变量是否设置为true。如果是，则调用setInterval在一段时间后检查动画是否完成。一旦第一个动画完成，需要使用clearInterval清除计时器并调用第二个动画。我不确定这是否是一个好的解决方案。 - nur

Answer 1

您可以检查元素当前是否正在进行动画：

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

或者简单地使用stop()停止任何正在进行的动画并清除队列：

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

- Johan

Answer 2

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

这里演示

让我来解释一下。像fadeOut和fadeIn这样的函数，您可以像这样使用回调：

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

因此，一旦fadeOut完成，它就会触发fadeIn()。

- sensei

---

我知道函数回调在这里会非常有用，但正如我在问题中提到的，由于在“toggle_about_me”中有一些情况没有回调（即两者都没有被点击的情况），所以我无法使用它们。 - mtveezy