我在jQuery中创建了一个滑块,可以在单击按钮时显示和隐藏div。但问题是它不顺畅,并且在幻灯片动画期间会跳跃。我已经尝试了所有的东西,从更改宽度到用填充替换边距,但没有任何工作。问题在哪里?
HTML:
<button class="show-btn"><a>Show Slider</a></button>
<!-- slider -->
<div class="slider" id="slider">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 slider-wrap">
<div class="row">
<div class="col-lg-12 col-md-12">
<ul class="top list-inline dev-icons top">
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-html5-plain-wordmark"></i></a></li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-css3-plain-wordmark"></i></a></li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-javascript-plain"></i></a></li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-jquery-plain-wordmark"></i></a></li>
</ul>
<ul class="bottom list-inline dev-icons">
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-photoshop-plain"></i></a></li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-php-plain"></i></a></li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-laravel-plain-wordmark"></i></a></li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-mysql-plain-wordmark"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<button class="hide-btn"><a>Hide</a></button>
</div>
</div> <!-- slider end -->
CSS:
.slider {
text-align: center;
padding: 40px 0;
background-color: rgba(24, 188, 156, 0.09);
box-sizing: border-box;
display: none;
border-left: solid 10px #2C3E50;
border-right: solid 10px #2C3E50;
border-bottom: solid 10px #2C3E50;
}
.dev-icons {
font-size: 7em;
}
.slider li a {
text-decoration: none;
}
.top {
padding-bottom: 45px;
}
.slider-wrap {
padding-bottom: 30px;
}
.hide-btn {
background: none;
border: 0;
background-color: #2C3E50;
padding: 15px 25px;
border-radius: 10px;
}
jQuery的:
$(".show-btn").click(function(){
$(".slider").slideDown();
$(this).fadeOut();
});
$(".hide-btn").click(function(){
$(".slider").slideUp();
$(".show-btn").fadeIn();
});
//scroll down on the page upon click
$(".show-btn").click(function() {
$('html, body').animate({
scrollTop: $(".slider").offset().top + (40)
}, 500);
});
答案 0 :(得分:2)
当.fadeOut()
完成时,它会设置导致跳跃的display: none;
样式。
将此用于fadeOut:
$(this).animate({ opacity: 0 });
使用它来淡化:
$(".show-btn").animate({ opacity: 1 });
答案 1 :(得分:1)
我在这个问题上给出了一个非常全面的理由 here ,希望你会发现它有用。它很好地回答了你的问题。
总结。您用来操作DOM的函数是
- .slideDown();
- .slideUp();
你应该使用
Opacity
或visibility
正如@Leroy提到的那样。