动画背景颜色像jQuery中的进度条

我有一个div有一些文本内容（ 例如：我的名字）， div是红色 background colour和一个按钮。

我的需要：

如果我点击了按钮，我需要将div的背景从RED更改为BLUE，就像Progress bar一样，持续10秒。有点像，

从0秒开始

=

==

===

====

=====

======

=======

========

=========

==========

以10秒结束

我必须从头到尾逐渐改变bgColor达10秒。

所以我使用了JQuery animate（）方法。但是我没有运气这样做。

我试过的：

  $("button").click(function(){ $('#myDivId').animate({background-color:'blue'},10000); }); 

如果这是不可能的，任何人都可以建议我做一些插件 。

希望我们的堆栈用户能帮助我。

Answer 1

我以为你在寻找“ 进度栏动画 ”？ 试试这个：我相信你想要的东西 – 进度条在jsfiddle中的水平加载运动：

http://jsfiddle.net/c78vF/6/

有了更多的元素，你就可以轻松地使用其他人在这里使用的相同技术来模拟… jquery ui等

HTML：

 Button 
 
 
 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); }); 

Answer 2

背景渐变装载器 – 可能更合适

您也可以使用背景渐变作为加载器。 当然，jQuery本身并不支持选择正确的CSS前缀，因此可能需要在较旧的浏览器中使用它。 但它可以很好地适用于浏览器支持linear-gradient 。

由于jQuery不会为背景渐变设置动画，因此我在其中设置了一个范围动画，并且每次使用step选项更改渐变停止。 这意味着animate()任何duration或easing更改也将应用于渐变：

 $("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%)' }); } }); }); 

的jsfiddle

---

原始答案

background-color是CSS样式，您的目标是javascript对象的属性，在本例中为backgroundColor 。 您还需要更改颜色名称。

 $("button").click(function(){ $('#myDivId').animate({backgroundColor:'blue'},10000); }); 

的jsfiddle

Answer 3

或者你可以做数学并进行颜色变化。 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 > }); > } > }) > }); 

Answer 4

这可以使用跨度随时间改变其宽度来完成。 这是工作小提琴 。 代码显示如下。 此处仅显示强制样式。

HTML

 
  //this is the only additional line you need to add 
Progress Button
 
 Click Me 

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%"); }); 

Answer 5

1. JavaScript变量名称不能有破折号，应该是backgroundColor 。
2. 你有'red' ，所以它不会改变任何东西。 将字符串更改为'blue' 。

 $("button").click(function(){ $('#myDivId').animate({ backgroundColor: 'blue' }, 10000); }); 

Answer 6

除了更多的previus coments（改变backgroundColor的背景颜色）你还需要插件Jquery Colors，我做了一个测试，没有它不起作用。

把它放在头上：

Answer 7

尝试以下代码

    
Text Area
  

让我知道它的工作与否……等待你的回复…….

Answer 8

如果你能够使用最新的CSS（这意味着没有愚蠢的旧浏览器），你可以使用CSS3的渐变function

 $("#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 

示例： http ： //jsfiddle.net/hkdennis2k/ebaF8/2/

Answer 9

你可以使用这段代码：

jsFiddle就在这里

HTML：

 Button 
 
 
 test Content 
  

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%"); }); 

Answer 10

您需要使用jQuery.Color（）插件进行背景色动画。

Answer 11

你想在jQuery而不是css3中做这个特别的原因吗？

Bootstrap有一个非常好的方法来实现这个 – > http://getbootstrap.com/components/#progress-animated

.progress-bar类在width属性上设置了css3过渡，因此当您在0％和100％之间移动时，对宽度的任何更新都会平滑地动画化。 它还使用css3动画来设置背景渐变（条纹图案）的动画。