让 Jquery 函数等待动画完成

Posted 2023-03-07

【中文标题】让 Jquery 函数等待动画完成

【英文标题】：Make Jquery function wait for animation to finish

【发布时间】：2014-01-21 19:39:02

【问题描述】：

我知道这个问题被问了很多，但我似乎仍然找不到答案。我的标题中有两个单独的 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() 但这也不起作用。我还尝试使用回调/完成函数进行淡入/淡出，但我不能这样做，因为在某些情况下两者都没有被点击（当页面首次加载时），所以我无法传递另一个函数。任何帮助将不胜感激，我已经坚持了好几天！

【问题讨论】：

这个同步可以用setInterval js函数吗？

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

我的想法是在第一个动画开始时保留一个设置为 true 的变量。单击第二个 div 时，它将检查变量是否设置为 true。如果是，那么它将调用 setInterval 来检查动画是否在间隔后完成。第一个动画完成后，需要使用 clearInterval 清除计时器并调用第二个动画。我不确定这是否是一个好的解决方案。

【参考方案1】：

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

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

或者只是stop()任何正在进行的动画并清除队列：

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

【参考方案2】：

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

DEMO HERE

看，让我解释一下。使用 fadeOut 和 fadeIn 等函数，您可以使用如下回调：

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

所以一旦fadeOut完成，它就会触发fadeIn()。

【讨论】：

我知道函数回调在这里非常有用，但正如我在问题中提到的那样，我无法做到，因为在“toggle_about_me”中会有一些没有回调的情况（两者都没有被点击的情况）。