Question

I’ve been jQuery’ing a little while, but i can’t figure out how i would fade from one gradient to another. I have been using
http://www.colorzilla.com/gradient-editor/
for my gradients. and for example

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

So if i wanted to on click of a link fade between multiple gradients how would you go about it?
(I would be using it for Navigation and/or div backgrounds)

At the moment i have been trying to store the above code in a var and use

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

Thanks in advance
Mach

Answer 1

Instead of using background gradient you can use two large DIVwith two different gradient placed behind everything, one on top of the other. To do the transition, fadeOut the bottom one and fadeIn the top one using the same duration. http://jsfiddle.net/CeD2q/6/