动画背景颜色像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); });
如果这是不可能的，任何人都可以建议我做一些插件 。
希望我们的堆栈用户能帮助我。
我以为你在寻找“ 进度栏动画 ”？ 试试这个：我相信你想要的东西 – 进度条在jsfiddle中的水平加载运动：
有了更多的元素，你就可以轻松地使用其他人在这里使用的相同技术来模拟… jquery ui等
HTML：
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选项更改渐变停止。 这意味着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
或者你可以做数学并进行颜色变化。 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 > }); > } > }) > });
这可以使用跨度随时间改变其宽度来完成。 这是工作小提琴 。 代码显示如下。 此处仅显示强制样式。
HTML
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%"); });
- JavaScript变量名称不能有破折号，应该是
backgroundColor。 - 你有
'red'，所以它不会改变任何东西。 将字符串更改为'blue'。
$("button").click(function(){ $('#myDivId').animate({ backgroundColor: 'blue' }, 10000); });
除了更多的previus coments（改变backgroundColor的背景颜色）你还需要插件Jquery Colors，我做了一个测试，没有它不起作用。
把它放在头上：
尝试以下代码
Text Area
让我知道它的工作与否……等待你的回复…….
如果你能够使用最新的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/
你可以使用这段代码：
jsFiddle就在这里
HTML：
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%"); });
您需要使用jQuery.Color（）插件进行背景色动画。
你想在jQuery而不是css3中做这个特别的原因吗？
Bootstrap有一个非常好的方法来实现这个 – > http://getbootstrap.com/components/#progress-animated
.progress-bar类在width属性上设置了css3过渡，因此当您在0％和100％之间移动时，对宽度的任何更新都会平滑地动画化。 它还使用css3动画来设置背景渐变（条纹图案）的动画。