jQuery的 - 褪色的身體背景（css漸變）到另一個CSS漸變

我一直在jQuery的一段時間，但我無法弄清楚我將如何從一個漸變到另一個漸變。我一直在爲我的漸變使用 http://www.colorzilla.com/gradient-editor/ 。例如jQuery的 - 褪色的身體背景（css漸變）到另一個CSS漸變

background: #ffaf4b; 
background: -moz-radial-gradient(center, ellipse cover, #ffaf4b 0%, #ff920a 100%); 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffaf4b), color-stop(100%,#ff920a)); 
background: -webkit-radial-gradient(center, ellipse cover, #ffaf4b 0%,#ff920a 100%); 
background: -o-radial-gradient(center, ellipse cover, #ffaf4b 0%,#ff920a 100%); 
background: -ms-radial-gradient(center, ellipse cover, #ffaf4b 0%,#ff920a 100%); 
background: radial-gradient(center, ellipse cover, #ffaf4b 0%,#ff920a 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=1);

所以，如果我想點擊一個鏈接淡出多個漸變之間你會怎麼去呢？（我會使用它的導航和/或DIV背景）

此刻，我一直試圖在上面的代碼存儲在var和提前使用

$('.li1').click(function(){ 
$('.navBar').animate(bgVar, 3000); 
});

感謝馬赫

來源

2012-06-13 Mach

您可能會在本課程中找到一些有用的建議：http://stackoverflow.com/questions/3790273/webkit-support-for-gradient-transitions –

而不是使用背景漸變的，你可以用兩個大DIV有兩個不同的梯度放在一切的背後，一個在另一個之上。要做轉換，fadeOut最下面的一個和fadeIn使用相同的持續時間。 http://jsfiddle.net/CeD2q/6/

來源

2012-06-13 11:04:41 z33m

使用此方法。使用4個不同梯度的div，全部使用 .class {position：fixed;頂部：0;左：0;} 工作的好讓我們希望他們改變它，所以它可以做得更容易:) 謝謝馬赫 – Mach

我認爲目前從背景漸變過渡到另一個背景漸變是不可能的。我已經看到一些人通過使用大的漸變背景圖像或背景漸變，然後使用background-position屬性進行過渡來繞過這一點。

這裏舉例： http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

來源

2012-06-13 10:59:51 jakee

jQuery的 - 褪色的身體背景（css漸變）到另一個CSS漸變

回答

相關問題