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