在 jQuery 中等待动画答案

【问题标题】：Wait an animation in jQuery在 jQuery 中等待动画
【发布时间】：2015-06-25 15:03:49
【问题描述】：

我想在动画结束时执行一些东西，所以我尝试使用jQuery的函数promise()，这就是我所拥有的：

$(".title").fadeOut("fast");
$(".title").promise().done(function() {
    $("#area").fadeIn("fast");
);

不幸的是，它不起作用，并且 chrome javascript 工具说 promise() 不是一个函数...

我尝试的另一件事是

$(".title").fadeOut("fast", function(){
$("#area").fadeIn("fast");
});

但它也不起作用......有什么想法吗？

谢谢

【问题讨论】：

如果语法正确，您尝试的两种方案都应该可以正常工作。您的第一个版本在最后一个 ); 之前缺少结束 }。如果您收到.promise() 不是函数的错误消息，那是因为您的 jQuery 版本太旧。在 v1.5 中添加了.promise()。

标签： javascript jquery function animation promise

【解决方案1】：

你可以使用JQuery的回调函数来做到这一点。

假设你有 2 个 div；一个正在显示，另一个在开头隐藏，如下所示；

<div style="width:50px;height:50px;background-color:black;" id="Div1"></div>
<div style="width:50px;height:50px;background-color:blue;display:none;" id="Div2"></div>

您可以等待第一个淡出，然后使用下面的代码淡入第二个。

$("#Div1").fadeOut(2000, function(){
    $("#Div2").fadeIn(2000);
});

这里也是JSFiddle示例Jquery Animation Callback

我希望这会有所帮助。

编辑：修改了具有相同类的多个元素的代码。 https://jsfiddle.net/eaktas/3wuter03/4/

【讨论】：

问题是我有很多要淡出的 div，这就是为什么我使用类而不是 id，而你的方法不能使用类:(
在方法中使用类或 id 没有区别。这里更新了类和多 div； jsfiddle.net/eaktas/3wuter03/2
你是对的。我不知道为什么它对我不起作用>_
好的，我发现了您的问题并使用一些控件更新了代码。因此，尽管有几个元素具有相同的类 jquery 只查找特定的类需要并正常工作。这是更新的代码jsfiddle.net/eaktas/3wuter03/4
对不起...但同样，有 3 个元素它不能很好地工作：jsfiddle.net/3wuter03/5 谢谢！

【解决方案2】：

它应该可以工作，可能你只是因为快速动画而无法注意到这一点。试试

$('#area').fadeOut(3000, function(){console.log('3s passed')})

【讨论】：

【解决方案3】：

您需要将承诺链接到另一个动画的后面。

$(".title").fadeOut("fast").promise().done(function() {
    $("#area").fadeIn("fast");
});

在这里查看小提琴https://jsfiddle.net/9b82s6ah/

【讨论】：