javascript - 淡入 div onclick 按钮

Question

大家好，我有 2 个包含信息的 div，我想要这样当用户单击按钮 1/2 时它会显示正确的 DIV。我已经设法做到这一点并完成了这项工作，但是我想尝试在它们上面放一个动画，这样它就会很快出现在屏幕上。因此，当他们单击按钮时，文本会淡入淡出。我不确定是否有用于此的库，因为我之前使用过 AOS 库，但它用于滚动而不是点击功能。

HTML:

 <button type="button" class="btn btn-warning" id="header1">Företagstelefoni</button>
  <button type="button" class="btn btn-warning" id="header2">Reklambyrå</button>

        <div class="parallax1" id="section_one" >
            <div class="row newtryh2">
                 ........
            </div>
       </div>

        <div class="parallax1" id="section_two">
            <div class="row newtryh2">
                 ........
            </div>
       </div>

JS:

$("#header1").click(function () {

    $("#section_one").show();
    $("#section_two").hide();
});
$("#header2").click(function () {

    $("#section_two").show();
    $("#section_one").hide();

});

CSS:

.parallax1 {
    padding-left: 30px;
        margin-top: 33px;
        display: none;
}

Fiddle Link

所以我只是想添加一些动画，比如很好地淡入，这样它就不会卡在屏幕上然后淡出。如果有人可以帮助我解决这个问题，或者知道那里有任何库，例如可以在 onclick 上运行的 AOS，那就太好了。

谢谢

Answer 1

使用fadeIn() 和fadeOut()

IE $("#section_two").fadeIn('fast');

https://jsfiddle.net/t5h1up21/5/

反过来你可以使用fadeToggle()

编辑

带有回调的函数如下所示:

$("#section_two").fadeOut('slow', function() {
    $("#section_one").fadeIn('fast'); // Or whatever your selector is
});