Jquery animate navigation color

Question

Привет, я делаю сайт на данный момент, и у меня возникают проблемы с анимацией панели навигации.

Я бы хотел, чтобы панель навигации была прозрачной изначально, чем для изменения фонового цвета после определенного div. Я сделал это, но хочу, чтобы фоновый цвет исчезал, а не просто появлялся. Ниже приведены HTML и JQuery.

Как заставить его исчезать до фонового цвета?

HTML

<div class="nav"> 
     <div class="container"> 
     <div class="logo"> 
     <a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a> 
     </div> 
     <div class="navMain"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 

Jquery

<script> 

    $(document).ready(function(){  
    var scroll_start = 0; 
    var startchange = $('#c-title'); 
    var offset = startchange.offset(); 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $('.nav').css('background-color', 'rgba(34,34,34,0.9)'); 
     } else { 
      $('.nav').css('background-color', 'transparent'); 
     } 
    }); 
}); 
</script> 

Спасибо, что нашли время, чтобы ответить на этот вопрос. (я надеюсь, что вопрос ясен, если не дайте мне знать)

Answer 1

использовать этот код в ваш CSS

.nav{ 
    transition-duration: 2s; 
} 

DEMO

Answer 2

<script> 

    $(document).ready(function(){  
    var scroll_start = 0; 
    var startchange = $('#c-title'); 
    var offset = startchange.offset(); 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $('.nav').animate({background-color: rgba(34,34,34,0.9)}, 1000); 
     } else { 
      $('.nav').css('background-color', 'transparent'); 
     } 
    }); 
}); 
</script> 

Answer 3

Попробуйте использовать сборку JQuery в animate() функции. Например:

$('yourDiv').animate({"color" : "red"},500); 

Это приведет к исчезновению цвета, а не к его изменению.

Answer 4

JQuery-х fadeIn() не предназначен для такого вида использования. Он исчезает в совпадающих элементах, а не с конкретными свойствами. Как уже упоминалось, вы могли бы использовать animate(), но из documentation, вы увидите, что background-color не один из свойств, если плагин не используется:

Все анимированные свойства должны быть анимированы одним числовым значением , , за исключением случаев, указанных ниже; большинство свойств, которые нечисловая не могут быть анимированные, используя базовую функциональность JQuery (например, ширина, высота, или влево можно анимировать, но цвет фона не может быть, если не используется jQuery.Color() плагин)