jQuery - 将正文背景（css 渐变）淡入另一个 CSS 渐变答案

【问题标题】：jQuery - Fading body background (css gradient) into another CSS gradientjQuery - 将正文背景（css 渐变）淡入另一个 CSS 渐变
【发布时间】：2012-06-16 07:38:24
【问题描述】：

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

提前致谢马赫

【问题讨论】：

您可能会在这个 SO 线程中找到一些有用的建议：stackoverflow.com/questions/3790273/…

标签： jquery html jquery-ui

【解决方案1】：

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

【讨论】：

使用这种方法。使用 4 个具有不同渐变的 div，全部使用 .class{position:fixed;顶部：0； left:0;} 工作得很好，希望他们改变它，这样可以更容易地完成 :) 谢谢马赫

【解决方案2】：

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

这里的例子： http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

【讨论】：