jQuery - 将主体背景(css 渐变)淡入另一个 CSS 渐变

Question

我使用 jQuery 已经有一段时间了，但我不知道如何从一个渐变渐变到另一个渐变。我一直在用 http://www.colorzilla.com/gradient-editor/对于我的渐变。例如

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);
});

提前致谢马赫

Answer 1

您可以使用两个大的 DIV，而不是使用背景渐变，将两个不同的渐变放置在所有内容的后面，一个在另一个之上。要进行转换，fadeOut 底部的 fadeIn 使用相同的持续时间。 http://jsfiddle.net/CeD2q/6/