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

You might find some useful suggestions in this SO thread: http://stackoverflow.com/questions/3790273/webkit-support-for-gradient-transitions — Jonathan Nicol, Jun 13 '12 at 11:03

score 1 · Accepted Answer · answered Jun 13 '12 at 11:04

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/

answered Jun 13 '12 at 11:04

z33m

5,993
1
31
42

Using this method. Used 4 divs with different gradients all with .class{position:fixed; top:0; left:0;} work's well lets hope they change it, so it can be done easier :) Thanks Mach – Mach Jun 13 '12 at 12:29

score 0 · Answer 2 · answered Jun 13 '12 at 10:59

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/

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

2 Answers2