爲什麼我的jQuery滑塊跳動和滯後？

我在jQuery中創建了一個滑塊，它在單擊按鈕時顯示並隱藏div。但問題在於它不平滑，在幻燈片動畫過程中跳躍。我試過了所有的東西，從改變寬度到用填充替換邊距，但沒有任何工作。哪裏有問題？爲什麼我的jQuery滑塊跳動和滯後？

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); 
});

來源

2016-07-30 Hamza Mirza

爲什麼你將這個問題的標題編輯爲「我可以使用visual basic來破解銀行賬戶？我想學習編程，但html太難了」？ – ceejayoz

當.fadeOut()完成它集display: none;風格引起跳躍。

使用此淡出：

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

使用此淡入：

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

來源

2016-07-30 08:41:09

我已經給了一個非常全面的原因，它在這個問題上here，希望你會發現它有幫助。它很好地回答你的問題。

至於總結。您正在使用操作DOM的功能是

.slideDown（）;

.slideUp（）;

您應該使用

Opacity OR visibility

爲了這個目的，@Leroy提及。

來源

2016-07-30 09:29:55

爲什麼我的jQuery滑塊跳動和滯後？

回答

相關問題