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

사용이 코드

.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

animate() 기능에 jQuery의 빌드를 사용하십시오. 좋아요 :

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

이렇게하면 색이 변하지 않고 색이 바래집니다. 당신의 CSS에서

Answer 4

jQuery의 fadeIn() 사용이 유형의 것은 아니다. 특정 속성이 아닌 일치하는 요소가 사라집니다. 다른 언급, 당신은 animate()를 사용할 수 있지만, documentation에서, 당신은 플러그인을 사용하지 않는 background-color는 속성 중 하나가 아닌 것을 볼 수 있습니다 :

모든 애니메이션 속성이 하나의 숫자 값으로 애니메이션되어야한다 , 아래에 명시된 것을 제외하고는 ; 기본 jQuery를 기능을 이용하여 애니메이션 수없는 숫자가 아닌 대부분의 특성 (예컨대, 폭, 높이, 용 또는 jQuery.Color() 플러그를 사용하지 않으면, 애니메이션 될 수 있지만, 배경 색이 될 수 없다 왼쪽)