我有一个div有一些文本内容（例如：我的名字）和div是红色 background colour和一个按钮。
我的需要：
如果我点击了按钮，我需要将 div 的背景从RED 更改为 BLUEProgress bar 10秒。类似，
从 0 秒开始
=
==
===
====
=====
======
=======
========
=========
==========
10秒结束
我必须从头到尾逐渐更改 bgColor 最多10 秒。
所以我使用了JQuery animate()方法。但我没有运气这样做。
我尝试过的：
$("button").click(function(){
$('#myDivId').animate({background-color:'blue'},10000);
});
如果这是不可能的，任何人都可以建议我一些插件来做到这一点。
希望我们的堆栈用户能帮助我。
我以为您在寻找“进度条动画”？试试这个：我相信它是您正在寻找的 - 进度条在 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);
});
背景渐变加载器 - 可能更合适
您也可以使用背景渐变作为加载器。当然，jQuery 本身并不支持选择正确的 CSS 前缀，因此它可能必须经过调整才能在较旧的浏览器中工作。但它会在您的浏览器支持linear-gradient的地方很好地工作。
由于 jQuery 不会为背景渐变设置动画，因此我在其中设置了一个跨度动画，并且step每次都使用更改渐变停止的选项。这意味着对 will 的任何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);
});
或者你可以做数学并改变颜色。 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
> });
> }
> })
> });
这可以使用 span 随时间改变其宽度来完成。这是工作小提琴。代码如下所示。此处仅显示强制样式。
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%");
});
如果你能够使用最新的 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);
});
示例：http: //jsfiddle.net/hkdennis2k/ebaF8/2/
您想在 jQuery 中而不是在 css3 中执行此操作的任何特殊原因？
Bootstrap 有一个非常漂亮的方法来实现这一点-> http://getbootstrap.com/components/#progress-animated
.progress-bar 类在 width 属性上设置了 css3 过渡，因此当您在 0% 和 100% 之间移动时，对宽度的任何更新都会平滑动画。它还使用 css3 动画来为背景渐变（条纹图案）设置动画。
try below code
<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" >
And Let me know it's working or not...waiting for your reply .......
您可以使用以下代码：
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%;}
}
查询：
$("button").click(function(){
$('.progress').addClass("filling").css("background","lightgreen").width("100%");
});
backgroundColor.'red'，所以它不会改变任何东西。将字符串更改为'blue'.$("button").click(function(){
$('#myDivId').animate({ backgroundColor: 'blue' }, 10000);
});
此外，前面的评论（更改背景颜色的背景颜色）你还需要插件 Jquery 颜色，我做了一个测试，没有它就不起作用。
把这个放在头上：
<script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.0.min.js"></script>
您需要为背景色动画使用 jQuery.Color() 插件。