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

Question

我有一个div有一些文本内容(例如:我的名字),div是红色 background colour和一个按钮.

我的需要:

如果我点击了按钮,我需要从改变div的背景红色到蓝色喜欢Progress bar的10秒 .Something一样,

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

Answer 2

背景渐变加载器 - 可能更合适

您也可以使用背景渐变作为加载器.当然,jQuery本身并不支持选择正确的CSS前缀,因此可能需要在较旧的浏览器中使用它.但它会很好地适用于您的浏览器支持的地方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%)'
            });
        }
    });
});

的jsfiddle

原始答案

background-color是CSS样式,你的目标是javascript对象的属性,在这种情况下,是backgroundColor.您还需要更改颜色名称.

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

的jsfiddle