淡入div onclick按钮

时间:2017-11-03 16:35:09

标签: javascript jquery html css css3

大家好我有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上工作。

谢谢

1 个答案:

答案 0 :(得分: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
});