jQuery - Fading body background (css gradient) into another CSS gradient

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 DIV with 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/

Answer 2

I think that currently transitioning from a background gradient to another background gradient is impossible. I have seen some people circumvent this by using a large gradient background-image or a background gradient and then transitioning using the background-position property.

Example here: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/