我有 div ，其中包含一些文字内容（例如：我的名字）， div 位于 RED background colour和一个按钮。
我的需要：
如果我点击了按钮，我需要将div的背景从 RED更改为BLUE ，如Progress bar 10秒。等等，
从0秒开始
=
==
===
====
=====
==
=======
======
======
==========
结束10秒
我必须从头到尾逐渐将 bgColor 更改为最多10秒。
所以我使用了 JQuery animate（）方法。但是我没有运气。
我尝试了什么：
$("button").click(function(){
$('#myDivId').animate({background-color:'blue'},10000);
});
如果无法做到这一点，任何人都可以建议我使用插件来做这件事。
希望我们的堆栈用户能帮助我。
答案 0 :(得分：11)
我认为您正在寻找“进度条动画”？试试这个：我相信你想要的东西 - 进度条在jsfiddle中的水平加载运动：
使用更多元素，您可以使用其他人在此处使用的相同技术轻松模拟... jquery ui等
<强> HTML：
<button>Button</button>
<div id='myDivId'>
<div class="progress"></div>
<div class="content">
DIV
</div>
</div>
<强>的CSS：
#myDivId{
background:red;
color:white;
padding:10px;
overflow:hidden;
position:relative;
}
.content{
z-index:9;
position:relative;
}
.progress{
z-index;1;
width:0px;
height:100%;
position:absolute;
background:blue;
left:0px;
top:0px;
}
<强> JS：
$("button").click(function(){
$('.progress').animate({ width: '100%' }, 10000);
});
答案 1 :(得分：9)
后台渐变加载器 - 可能更合适
您也可以使用背景渐变作为加载器。当然，jQuery本身并不支持选择正确的CSS前缀，因此可能需要在较旧的浏览器中使用它。但它可以很好地适用于您的浏览器supports linear-gradient。
由于jQuery不会为背景渐变设置动画，因此我在其中设置了一个范围动画，并使用step选项每次更改渐变停止。这意味着对duration的任何easing或animate()更改也将适用于渐变：
$("button").click(function(){
$('#loadContainer span').animate({width:'100%'}, {
duration:10000,
easing:'linear',
step:function(a,b){
$(this).parent().css({
background:'linear-gradient(to right, #0000ff 0%,#0000ff '+a+'%,#ff0000 '+a+'%,#ff0000 100%)'
});
}
});
});
原始回答
background-color是CSS样式，您的目标是javascript对象的属性，在本例中为backgroundColor。您还需要更改颜色名称。
$("button").click(function(){
$('#myDivId').animate({backgroundColor:'blue'},10000);
});
答案 2 :(得分：4)
或者你可以做数学并进行颜色变化。 http://jsfiddle.net/rustyDroid/WRExt/2/
> $("#btn").click(function(){
> $('#bar').animate({ width: '300px' },
> {
> duration:10000,
> easing:'linear',
> step:function(a,b){
> var pc = Math.ceil(b.now*255/b.end);
> var blue = pc.toString(16);
> var red = (255-pc).toString(16);
> var rgb=red+"00"+blue;
> $('#bar').css({
> backgroundColor:'#'+rgb
> });
> }
> })
> });
答案 3 :(得分：2)
这可以使用跨度随时间改变其宽度来完成。 Here is the working fiddle。代码显示如下。此处仅显示强制样式。
HTML
<div class="red-button">
<span class="bg-fix"></span> //this is the only additional line you need to add
<p>Progress Button</p>
</div>
<button class="click-me">Click Me</button>
CSS
.red-button {
position: relative;
background: red;
}
span.bg-fix {
display: block;
height: 100%;
width: 0;
position: absolute;
top: 0;
left: 0;
background: blue;
transition: width 10s ease-in-out;
}
p {
position: relative;
z-index: 1
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
的jQuery
$("div.red-button").click(function () {
$('span.bg-fix').css("width", "100%");
});
答案 4 :(得分：1)
backgroundColor。'red'，所以它不会改变任何东西。将字符串更改为'blue'。$("button").click(function(){
$('#myDivId').animate({ backgroundColor: 'blue' }, 10000);
});
答案 5 :(得分：1)
还有更多的天赋（改变backgroundColor的背景颜色）你还需要插件Jquery Colors，我做了一个测试，没有它不能工作。
把它放在头上：
<script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.0.min.js"></script>
答案 6 :(得分：1)
尝试以下代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
$('#myDivId').css("background-color","BLUE");
$( "#effect" ).animate({
backgroundColor: "yellow", }, 1000 );
});
});
</script>
<div id="myDivId" style="width:120;height:130;background-color:RED;text-align: center;">Text Area</div>
<input type="button" id="button" class="" name="click" value="click" >
让我知道它的工作与否......等待你的回复.......
答案 7 :(得分：1)
如果你能够使用最新的CSS（这意味着没有愚蠢的旧浏览器），你可以使用CSS3的渐变功能
$("#bar").mousemove(function (e) {
var now=e.offsetX/5;
$(this).css('backgroundImage', 'linear-gradient(to right, #00f 0%,#00f ' + now + '%,#f00 ' + now + '%,#f00 100%)');
}).click(function(e){
e.preventDefault();
var start=new Date().getTime(),
end=start+1000*10;
function callback(){
var now=new Date().getTime(),
i=((now-start) / (end-start))*100;
$("#bar").css('backgroundImage', 'linear-gradient(to right, #00f 0%,#00f ' + i + '%,#f00 ' + i + '%,#f00 100%)');
if(now<end){
requestAnimationFrame(callback, 10);
}
};
requestAnimationFrame(callback, 10);
});
答案 8 :(得分：1)
您可以使用此代码：
<强> HTML：
<button>Button</button>
<div id='container'>
<div class="progress"></div>
<div class="content">
test Content
</div>
</div>
<强> CSS：
#container{
background:#eee;
color:#555;
padding:10px;
overflow:hidden;
position:relative;
}
.content{
z-index:9;
position:relative;
}
.progress{
z-index;1;
width:0px;
height:100%;
position:absolute;
background:tomato;
left:0px;
top:0px;
}
.filling{
animation: fill 10s linear;
-webkit-animation: fill 10s; /* Safari and Chrome */
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}
@keyframes fill
{
0% {background: red; width:0%;}
25% {background: yellow; width:25%;}
50% {background: blue; width:50%;}
75% {background: green; width:75%;}
100% {background: lightgreen; width:100%;}
}
@-webkit-keyframes fill /* Safari and Chrome */
{
0% {background: red; width:0%;}
25% {background: yellow; width:25%;}
50% {background: blue; width:50%;}
75% {background: green; width:75%;}
100% {background: lightgreen; width:100%;}
}
<强> JQuery的：
$("button").click(function(){
$('.progress').addClass("filling").css("background","lightgreen").width("100%");
});
答案 9 :(得分：1)
您需要使用jQuery.Color（）插件进行背景色动画。
答案 10 :(得分：1)
你想在jQuery而不是css3中做这个特别的原因吗？
Bootstrap有一个非常好的方法来实现这一点 - ＆gt; http://getbootstrap.com/components/#progress-animated
.progress-bar类在width属性上设置了css3过渡，因此当您在0％和0之间移动时， 100％，宽度的任何更新都是平滑的动画。它还使用css3动画来设置背景渐变（条纹图案）的动画。