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

所以我只是试图添加一些动画，就像它很好地淡化它所以它不会捕捉到屏幕上并淡出它。如果有人可以帮助我解决这个问题，或者知道那些像AOS这样的库可以在一个非常棒的onclick上工作。

谢谢

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 });

淡入div onclick按钮

1 个答案: