Атрибут стиля переопределяет свойство 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); 
} 
});