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/

Answer 2

我认为目前从背景渐变转换到另一种背景渐变是不可能的。我看到有些人通过使用大的渐变背景图像或背景渐变然后使用background-position属性进行转换来绕过这个。

此处示例： http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

jQuery - 将身体背景（css渐变）淡化为另一个CSS渐变

2 个答案: