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>

使用此标记，滑动条会向下和向上滑动。例如，我已经在滑动条中添加了谷歌地图，当时我注意到条形图是滞后的。这可能是导致动画滞后的原因，导致谷歌地图只在栏打开时加载吗？我还在复制的片段动画中实现了“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;
    });
    ......

Answer 2

我建议一些不同的选择。

首先，

相反，使用jquery的动画功能。 http://api.jquery.com/animate/

示例代码：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');
});

Slidingbar .js动画不流畅

2 个答案: