Why is my jquery slider jumpy and laggy?

Question

I have created a slider in jQuery that shows and hides a div upon clicking a button. But the problem is it's not smooth and it jumps during the slide animation. I've tried everything, from changing widths to replacing margins with paddings but nothing is working. Where is the problem?

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

When .fadeOut() completes it sets the display: none; style that causes the jumping.

Use this to fadeOut:

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

Use this to fadeIn:

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

Answer 2

I have given a very comprehensive reason for it on this question here, Hope you will find it helpful. It answers your question well.

As for the summary. The functions you are using to manipulate the DOM are

• .slideDown();
• .slideUp();

You should either use

Opacity OR visibility

For this purpose as @Leroy has mentioned.