样式属性覆盖 css 属性分配给 jquery

Question

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

请找到上面的代码。当我向下滚动时效果很好，但是当我返回时，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>

Answer 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);
}
});

样式属性覆盖 css 属性分配给 jquery

The style attribute is overriding the css property assigned with jquery

html

javascript

css

jquery

jquery-animate

样式属性覆盖 css 属性 分配给 jquery

The style attribute is overriding the css property assigned with jquery

html

javascript

css

jquery

jquery-animate

样式属性覆盖 css 属性分配给 jquery