JQuery滾動動畫顏色

我在我的網站上有一個固定的位置標題，它在頁面頂部有一個alpha透明度。當用戶滾動瀏覽頁面頂部時，它會以純色動畫。但是，當用戶滾動回頁面頂部時，我希望顏色返回到Alpha透明度。不幸的是，從我讀過的JQuery顏色動畫不支持RGBA值。當用戶向下滾動時，顏色會發生變化，但是當它位於頁面頂部時，我無法變成顏色。JQuery滾動動畫顏色

<script type="text/javascript"> 
    $(window).scroll(function() { 
     $("#header").css("position", "fixed"); 
     if ($(window).scrollTop() > 0) { 
      $("header").animate({backgroundColor:'#2b2b2b'}, 'slow'); 
     } 
     if ($(window).scrollTop() <= 0) { 
      $("header").animate({backgroundColor: '#000000'}, 'slow'); 
     } 
    }); 
</script>

有關如何做到這一點的任何想法？

來源

2013-03-06 bdjett

你確定它的'$（「頭」）'和'不是$（「＃頭」）'？ – 2013-03-06 22:00:06

是的，我有一個HTML5頭標記包裹在一個ID爲#header的div div令人困惑。 – bdjett 2013-03-06 22:02:57

實際上，jQuery的動畫不支持動畫背景顏色（請參閱我對roXor的回答的評論）。您需要額外的庫來爲背景顏色添加動畫。 – Shauna 2013-03-06 22:53:53

使用CSS3 transition使用jQuery：

您可以附加一個CSS3過渡到header到自定義類，您可以設置所需的顏色。
比使用jQuery你只需要添加/刪除類：

LIVE DEMO

$(window).scroll(function() { 
    var addRemClass = $(window).scrollTop() > 0 ? 'addClass' : 'removeClass'; 
    $("header")[addRemClass]('bgChange'); 
});

CSS：

header{ 
    background:#000; 
    padding:20px; 
    color:#fff; 
    width:100%; 
    transition:0.8s; /* Our nice transition (you can also use 'ms' values) */ 
} 

header.bgChange{ 
    background:#2b2b2b;/* I used #f00 in the demo to make it more obvious :) */ 
}

解決方案使用jQuery用戶界面： 爲了支持更多的瀏覽器不喜歡：

LIVE DEMO

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
<script> 
    $(window).scroll(function() { 
     $("header").stop().animate({ 
      backgroundColor: $(window).scrollTop() > 0 ? '#2b2b2b' : '#000' 
     }, 800); 
    }); 
</script>

來源

2013-03-06 21:55:59

我無法使用fadeTo（），因爲我不希望標題上的文字變淡。 – bdjett 2013-03-06 22:06:38

@ bjett92編輯我的回答 – 2013-03-06 22:11:24

注 - jQuery不支持默認背景顏色的動畫。你需要一個額外的庫（jUI或者Color插件）來僅僅使用jQuery（並且沒有支持幾個漏洞的CSS3）來完成它，以防你想要走這條路線。 http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor – Shauna 2013-03-06 22:16:16

JQuery滾動動畫顏色

回答

相關問題