Slidingbar .js動畫不平滑

Question

我剛剛爲在wordpress上運行的網站構建了滑動頂部面板。因此我通過使用一個鉤子點將該條添加到標題中。我使用了一個非常簡單的custom.js（主要是從不同來源複製），以便在第一次單擊時滑動條（「出現」）和第二次單擊時「滑動」（=消失）。出於某些原因，此動畫不能順利運行。雖然速度有點太快了（我可以通過提高速度持續時間來輕鬆改變），但動畫似乎也有些滯後。我敢打賭，我監督重要的事情，因爲我不習慣jQuery/Javascript。在那裏存在一些代碼片段以使轉換更順利？

Java的腳本標記：

// Slidingbar initialization 
var tgslidingbar_state = 0; 

// Clicking 
jQuery('.tg-toggle-wrapper').click(function(){ 
var $tgslidingbar = jQuery (this).parents('#tgslidingbar-area').children('#tgslidingbar'); 


//Expand 
if (tgslidingbar_state === 0) { 
$tgslidingbar.slideDown(340, 'easeOutQuad'); 
jQuery('.tg-toggle-wrapper').addClass('open'); 
tgslidingbar_state = 1; 

//Collapse 
} else if(tgslidingbar_state == 1) { 
$tgslidingbar.slideUp(340,'easeOutQuad'); 
jQuery('.tg-toggle-wrapper').removeClass('open'); 
tgslidingbar_state = 0; 
} 
}); 

HTML的標記：

<div id="tgslidingbar-area" class="tgslidingbar-area"> 

<div style="display: none;" id="tgslidingbar"> 
<div class="containertop"> 


Slidingbar Content Here! 

</div></div> 

<div class="tg-toggle-wrapper"><a class="tg-toggle" href="#"></a>  

</div></div> 

有了這個標記的滑桿做幻燈片向下和向上。例如，我已經注意到該欄是滯後的，因此我已將Google地圖添加到滑動欄中。這是否會成爲laggy動畫的原因呢，導致google地圖只在條打開時加載？我還在複製的片段動畫中實現了「easeOutQuad」屬性，並在網絡上進行搜索。它似乎是一個流行的jQuery動畫庫。到目前爲止，我沒有將這個圖書館加入我的網站，也許這就是原因？

親切的問候來自德國！

Answer 1

餘施加於碼一些修改。

我使用查詢的動畫功能。

#tgslidingbar的初始顯示屬性改變爲「塊」

加在容器頂部類「填充」和「移除填充」上tgslidingbar類。

https://jsfiddle.net/nigayo/cn49ubr6/

[HTML]

<div style="display:block;height:0" id="tgslidingbar"> 

[JS]

var tgslidingbar_state = 0; 
var $tgslidingbar = jQuery('#tgslidingbar'); 
var nHeight = $tgslidingbar.get(0).scrollHeight; 


// Handle the slidingbar toggle click 
jQuery('.tg-toggle-wrapper').click(function() { 


    //Expand 
    if (tgslidingbar_state === 0) { 
    $tgslidingbar.animate({ 
     'height': nHeight 
    }, 340, function() { 
     jQuery('.tg-toggle-wrapper').addClass('open'); 
     tgslidingbar_state = 1; 
    }); 
    ...... 

Answer 2

我建議一些不同的選項。

第一，

相反，使用jQuery的動畫功能。

示例代碼：https://jsfiddle.net/nigayo/jo5vd2ob/

第二。

你可以使用css轉換。 http://jsfiddle.net/nigayo/qy1ummx6/1/

[CSS]

.box {  
float: left; 
/* you can use other ease effect. ease-in, ease-out, ease-in-out */ 
-webkit-transition: all 1s ease; 
overflow: hidden; 
} 

.height { 
background-color: red; 
width: 300px; 
max-height: 0px; 
} 
.change { 
    max-height: 500px; 
} 

[JS]

$('button').on('click', function() { 
    $('.box').toggleClass('change'); 
});