大家好我有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;
}
所以我只是试图添加一些动画,就像它很好地淡化它所以它不会捕捉到屏幕上并淡出它。如果有人可以帮助我解决这个问题,或者知道那些像AOS这样的库可以在一个非常棒的onclick上工作。
谢谢
答案 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
});