动画不需要的延迟

Question

$(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秒的代码

Answer 1

在stop()

之前添加animate

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

Answer 2

必须有一个CSS转换延迟将其保留在某处。尝试在动画发生时检查元素的css，然后将其追溯到css。