Question

我知道这已被问了很多，但我似乎仍无法找到答案。我的标题中有两个单独的div，当单击一个时，它在我的页面的主要部分有一些内容fadeIn。我试图做到这一点，如果一个人已被点击，新的人必须等待旧的fadeOut才会消失。我的问题是它不等待旧的fadeOut，它正在逐渐消失远。我省略了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();

我尝试使用没有$ .when（）的.done（），但是也没用。我也尝试使用fadeIn / fadeOut的回调/完成函数，但是我不能这样做，因为有一种情况都没有被点击（当页面首次加载时）所以我将无法传递另一个函数。任何帮助将不胜感激，我已经坚持了好几天！

Answer 1

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

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

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

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

Answer 2

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

<强> DEMO HERE

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

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

因此，一旦完成fadeOut，它就会触发fadeIn（）。

使Jquery功能等待动画完成

2 个答案: