动画不必要的延迟

$(window).scroll(function(){ 
 
    var scrollTop = $(window).scrollTop(); 
 
     // Set navigation background 
 
     if (scrollTop > 50) { 
 
      $('.nav').animate({ 
 
       height: "90px", 
 
       backgroundColor: "rgba(0,0,0,0.7)" 
 
      });  
 
     } else { 
 
      $('.nav').animate({ 
 
       height: "120px", 
 
       backgroundColor: "rgba(0,0,0,0.0)" 
 
      });  
 
     } 
 
    });

.nav { 
 
    height: 120px; 
 
    width: 100%; 
 
    background-color: orange; 
 
    position: fixed; 
 
    } 
 

 
.content { 
 
    background-color: black; 
 
    height: 4000px; 
 
    width: 100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"></div> 
 
<div class="content"></div>

嗯，我有这样的jQuery代码，并将其上有一个巨大的不必要的延迟，我该如何解决这一问题？ Okey需要添加更多的细节，以及这是代码谁应该动画我的导航栏，但它会喜欢6秒延迟

来源

2016-12-14 Sander

添加stop()你不希望它动画呢？ – Sharlike

你确定动画开始吗？ – ahitt6345

哈哈哈...当然，我想动画，但它会等待6秒钟，然后它动画。那么我希望你明白我不想要那6秒的等待时间，明白吗？ – Sander

前animate

$('.nav').stop().animate(...)

来源

2016-12-14 20:31:45 Slonski

太棒了！解决了我的问题，谢谢！实际上它有点奇怪，我只有一个动画，我可以在我的qeue中想到，但它工作正常 – Sander

每次滚动时，都会触发另一个动画，并且动画以队列形式运行，除非您停止（）它们 – Slonski

必须有一个CSS转换延迟举行它的地方。尝试在动画发生时检查元素的CSS，然后将其追溯回css。

来源

2016-12-14 20:13:59 Commodore64

奇怪我没有在我的CSS代码中的任何转换，除了一个按钮有一个平滑的不透明度变化（过渡：不透明度0.5s，顶部0.2s;） – Sander

这就排除了css，这通常会让你专注于在javascript方面找到问题的根源。转换延迟，可能也会进入你可能插入的任何引导程序或其他css库。这就是说，排除动画故障的CSS将成为我名单上的第一件事，然后深入研究JS的一面。在这种情况下，排队的动画阻止了节目。 – Commodore64

动画不必要的延迟

回答

相关问题