jQuery - Fading body background (css gradient) в другой градиент CSS

Question

Я немного jQuery'ing, но я не могу понять, как я буду исчезать от одного градиента к другому. Я использовал 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 фона)

В настоящее время я пытался сохранить выше код в вар и использовать

$('.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/