Warum ist mein jquery Slider jumpy und laggy?

Question

Ich habe einen Schieberegler in jQuery erstellt, die ein div beim Klicken auf eine Schaltfläche zeigt und verbirgt. Aber das Problem ist, es ist nicht glatt und es springt während der Folienanimation. Ich habe alles ausprobiert, von der Breitenänderung bis zum Ersetzen der Ränder durch Polsterungen, aber nichts funktioniert. Wo ist das 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

Wenn .fadeOut() vervollständigt den display: none; Stil setzt, die das Springen verursacht.

verwenden zu fadeOut:

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

verwenden zu fadeIn:

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

Answer 2

ich einen sehr umfassenden Grund dafür zu dieser Frage gegeben haben here, hoffen, dass Sie finden es hilfreich . Es beantwortet deine Frage gut.

Wie für die Zusammenfassung. Die Funktionen, die Sie auf das DOM zu manipulieren verwenden sind

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

sollten Sie entweder

Opacity ODER visibility

Zu diesem Zweck als @Leroy erwähnt hat.