javascript - 为什么我的 jquery slider 跳动和滞后？

Question

我在 jQuery 中创建了一个 slider ，它在单击按钮时显示和隐藏一个 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);
});

Answer 1

当 .fadeOut() 完成时，它会设置导致跳跃的 display: none; 样式。

使用它来淡出:

$(this).animate({ opacity: 0 });

使用它来淡入:

$(".show-btn").animate({ opacity: 1 });