javascript - 等待 jQuery 中的动画

Question

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

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

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

我尝试过的另一件事是

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

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

谢谢

Answer 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/