javascript - Slidingbar.js动画不流畅

Question

我刚刚为一个在 WordPress 上运行的网站构建了一个滑动顶部面板。因此，我使用 Hook 点将栏添加到标题中。我使用一个非常简单的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>

使用此标记，滑动条可以向下和向上滑动。例如，当我注意到滑动条滞后时，我在滑动条中添加了谷歌地图。这是否也是动画滞后的原因，导致谷歌地图在栏打开时才加载？我还在复制的片段动画中实现了“easeOutQuad”属性，并在网络上搜索了该属性。它似乎是一个流行的动画 jQuery 库。到目前为止，我还没有将该库包含到我的网站中，也许这就是原因？

来自德国的亲切问候!

Answer 1

我对代码进行了一些修改。

我使用查询的动画功能。

#tgslidingbar 的初始显示属性已更改为“block”

在容器顶级类上添加了“padding”，并在 tgslidingbar 类上删除了“padding”。

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