时间戳

首页 > 解决方案 > 使用 jQuery 平滑 e 同时动画 2 个 div

jquery - 使用 jQuery 平滑 e 同时动画 2 个 div

问题描述

我有 2 个 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;}

标签： jquerycssanimation

解决方案

对于未来的用户，freedomn-m 解决方案非常有效：

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

推荐阅读