2

我已经使用 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);
});

提前感谢马赫

4

2 回答 2

1

除了使用背景渐变，您可以使用两个大DIV的，两个不同的渐变放置在所有东西的后面，一个在另一个之上。要进行过渡，fadeOut底部的和fadeIn顶部的使用相同的持续时间。http://jsfiddle.net/CeD2q/6/

于 2012-06-13T11:04:41.447 回答
0

我认为目前从背景渐变过渡到另一个背景渐变是不可能的。我见过一些人通过使用大的渐变背景图像或背景渐变来规避这一点，然后使用背景位置属性进行过渡。

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

于 2012-06-13T10:59:51.840 回答