2014-12-05 193 views
2

嗨,我正在製作一個網站,我在動畫導航欄時遇到問題。jquery動畫導航顏色

我想導航欄最初是透明的,而不是它在某個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> 

感謝您抽出寶貴的時間來回答這個問題。 (我希望這個問題是清楚的,如果不是讓我知道)

+0

莫非你做了一個jsfiddle? => [JSFIDDLE](http://www.jsfiddle.net) – 2014-12-05 02:13:31

+0

@Godisgood當然,我會做到這一點。 – user3218008 2014-12-05 02:17:58

+0

@ user3218008所以這裏的一切都準確地改變'background-color',但是你想要從透明轉換到'rgba(34,34,34,0.9)'來淡入? – ethorn10 2014-12-05 03:09:34

回答

1

使用這種代碼在你的CSS

.nav{ 
    transition-duration: 2s; 
} 

DEMO

+0

對不起,沒有工作 – user3218008 2014-12-05 02:32:37

+0

其中#c標題在你的html代碼? – 2014-12-05 02:40:08

+0

這只是它會觸發改變顏色的標題元素。 – user3218008 2014-12-05 02:43:14

1
<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> 
+0

對不起,沒有工作。 – user3218008 2014-12-05 02:32:16

+0

也許現在嘗試...沒有qoute – Bran 2014-12-05 03:08:30

+0

沒有沒有工作。你知道我可以使用的其他選項嗎? – user3218008 2014-12-05 03:14:36

1

嘗試在animate()功能使用jQuery的構建。像這樣:

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

這會褪色而不是隻是改變它。

+0

我試過了,但沒有奏效。你的意思是這樣的:$(document)。()函數(){ 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({「color」:「red」},500); }其他{ $ ('.nav').css('background-color','transparent'); } }); }); – user3218008 2014-12-05 02:25:48

+0

是的,這將確保網站在發生任何事情之前完全加載。 – DripDrop 2014-12-05 02:30:23

1

jQuery的fadeIn()不適用於這類用途。它會淡化匹配的元素,而不是特定的屬性。正如其他人所說,你可以使用animate(),但是從documentation,你會看到background-color不是屬性之一,除非插件使用:

所有動畫屬性應該動畫到一個單一的數值, 除了下面指出的;那些非數字不能使用基本jQuery的功能性來 動畫大多數屬性(例如,寬度,高度, 或左可以是動畫,但背景顏色不能,除非使用 jQuery.Color()插件)