Question

我的div宽度为0px。在用户滚动x距离后，我想将div设为140px。

当我滚动到那一点时，在看到动画之前有一段很长的延迟。我越滚动延迟时间越长。我还将包含div设置为固定在同一点。固定项目工作正常但动画始终延迟：

HTML：

<div class="menu-bar">
    <div class="wrap">
        <div id="menu-logo">
            <img src="..." />
        </div>
        <nav id="site-navigation" role="navigation">...</nav>

        <div class="right-menu">...</div>
    </div>
</div>

JS：

$(window).scroll(function(){
    var barPos = $('#content').offset().top - $(document).scrollTop();
    var menuHeight = $('.menu-bar').height();
    var topColors = $('#top-colors').height();

    if(barPos <= (topColors+menuHeight)) {
        $('.menu-bar').css({'position':'fixed','bottom':'auto','top':'0px'});
        $('#menu-logo').animate({'width':'140px'});
    } else {
        $('.menu-bar').css({'position':'absolute','bottom':'0px','top':'auto'});
        $('#menu-logo').animate({'width':'0px'});
    }
});

Answer 1

滚动文档视图或元素时会触发scroll事件。

这意味着您的回调会多次触发，因此每个jQuery.fn.animate都会将新动画添加到队列中。

作为一个快速解决问题，您可以在每次jQuery.fn.clearQueue来电之前尝试拨打jQuery.fn.stop或jQuery.fn.animate。

Answer 2

您可以在JQuery中的css声明中更改动画：

$(window).scroll(function(){
   var barPos = $('#content').offset().top - $(document).scrollTop();
   var menuHeight = $('.menu-bar').height();
   var topColors = $('#top-colors').height();

   if(barPos <= (topColors+menuHeight)) {
      $('.menu-bar').css({
        'position':'fixed',
        'bottom':'auto',
        'top':'0px',
        'width': '140px',
        'transition': 'width 0.4s ease'
   });
   } else {
      $('.menu-bar').css({
        'position':'absolute',
        'bottom':'0px',
        'top':'auto'
        'width': '0',
        'transition': 'width 0.4s ease'
     });
   }
});

滚动后用jquery动画延迟很长时间

2 个答案: