用jQuery同时平滑2个div的动画

Question

我有两个div。一旦用户点击链接，其中一个必须隐藏，同时另一个必须显示。我想我可以用jQuery做到这一点，但我的代码在大约0.5秒内隐藏了第一个div，但同时它会立即显示上面的第二个div。一旦第一个被隐藏，第二个就会以一种粗糙的方式取代它，在动画中创建闪烁。我如何才能顺利、持续地完成这项工作？

我需要的是，第二个div只在第一个div消失后出现，两者都有一个渐变。换句话说，我需要一个柔和的过渡。

这里是我的jQuery代码：

$("#skip_step2creator").click(function() {
$(".form_step2creator").fadeOut();
$(".form_step3creator").css({display: "block"}).animate({opacity: 1.0});
});

HTML:

<div class="form_step2creator">
<p>Content</p>
</div
<div class="form_step3creator">
<p>Content</p>
</div

CSS：

.form_step3creator {display: none;}

Answer 1

您需要使用.fadeOut()方法可用的回调。回调是在动画完成后调用的，因此您可以简单地将处理.form_step3creator的逻辑移到回调中。

此外，您可以只使用.fadeIn()，而不必在不透明度中切换CSS显示属性+动画。

参见概念验证示例：

$("#skip_step2creator").click(function() {
$(".form_step2creator").fadeOut(function() {
$(".form_step3creator").fadeIn();
});
});

.form_step3creator {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="skip_step2creator">Skip</button>
<div class="form_step2creator">
<p>form_step2creator</p>
</div>
<div class="form_step3creator">
<p>form_step3creator</p>
</div>

Answer 2

对于未来的用户，freedomn-m解决方案运行得很好：

$(".form_step2creator").fadeOut(() => $(".form_step3creator").fadeIn());