style 属性覆盖了用 jquery 分配的 css 属性答案

【问题标题】：The style attribute is overriding the css property assigned with jquerystyle 属性覆盖了用 jquery 分配的 css 属性
【发布时间】：2016-09-11 02:27:55
【问题描述】：

我在为导航栏设置动画时遇到问题。

请找到上面的代码。当我向下滚动时它工作得很好，但是当我回来时，css 值没有按照 javascript 中的指定进行分配。请在这方面帮助我。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<style>
.positioned {
    position: fixed;
    top: 40px;
    left: 15px;
  width:100%;
}
.content{
  height:1200px;
}



/* Just cosmetic stuff */

body {
    font-family: arial;
    font-size: 14px;
    height:1200px;
}

div {
    background: #fafafa;
    border: 1px solid #777;
    padding: 5px;
}

.positioned {
    background: #e1eef5;
}
</style>
<div class="navbar">
</div>

<div class="positioned">
    position: fixed; bottom: 10px; left: 15px;
</div>

<div class="content">

</div>
<script type="text/javascript">
    $(window).scroll(function() {
    if ($(window).scrollTop() >= 250) {
        $('.positioned').animate({
          backgroundColor: "red",
          height: '300px'},1000);
    } else { 
        $('#box').css('display', 'block');
        $('.positioned').css("background-color", "yellow");
        // var rowNavbar = $('.row-navbar');
        // $('.row-navbar').animate({
        //   height: '130px'},1000);
    }
});
</script>

【问题讨论】：

这是链接：codepen.io/mohanjp20/pen/QKjOOz
请在问题本身中包含代码，而不仅仅是在链接中。
请构建一个最小的测试用例并将其嵌入到您的问题中。如果代码在问题中可见，您会得到更多关注。

标签： javascript jquery html css jquery-animate

【解决方案1】：

如果在同一个元素上调用了多个动画方法（滚动次数），则后面的动画将被放置在该元素的效果队列中。在第一个动画完成之前，这些动画不会开始。当 .stop() 被调用时，队列中的下一个动画立即开始

$(window).scroll(function() {
if ($(window).scrollTop() >= 250) {
    $('.positioned').stop().animate({
      backgroundColor: "red",
      height: '300px'},1000);
} else { 
   $('.positioned').stop().animate({
     display:'block',
      backgroundColor: "yellow"
      },1000);
}
});

【讨论】：