Slidingbar .js动画不流畅-Java 学习之路

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

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

亲切的问候来自德国！

2 回答

我在代码上应用了一些修改 .

我使用查询的动画功能 .

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

在容器顶级类上添加了'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;
    });
    ......

回复于 2024-05-06T13:08:04+08:00

我建议一些不同的选择 .

first,

相反，使用jquery的animate函数 . http://api.jquery.com/animate/

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

second.

你可以使用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');
});

回复于 2024-05-06T13:08:04+08:00

Slidingbar .js动画不流畅

2 回答

相关问题