Animate background color like a progress bar in jQuery

Question

I have a div which has some text content( eg: My Name ) and the div is in RED background colour and a button.

My need :

If I have clicked the button , I need to change the background of a div from RED to BLUE like Progress bar for 10 seconds.Something like,

start from 0 sec

=

==

===

====

=====

======

=======

========

=========

==========

end with 10 seconds

I have to change the bgColor gradually from start to end for upto 10 secs.

So I have used the JQuery animate() method .But I have no luck to do that.

What I have tried :

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

If this is not possible , can anyone please suggest me some plugin's to do that.

Hope our stack users will help me.

Answer 1

I thought your looking for a "Progress Bar Animation"? try this: i believe its what your looking for - the progress bar's horizontal loading motion in a jsfiddle here:

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

with a few more elements you are able to simulate that easily using the same tech everyone else is using here... jquery ui etc

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

Background gradient loader - possibly more appropriate

You could also use the background gradient as the loader. Of course, jQuery doesn't natively support choosing correct CSS prefixes, so it may have to be tweeked to work in older browsers. But it'll work nicely where your browser supports linear-gradient.

Since jQuery won't animate a background gradient, I've animated a span within it and am using the step option to change the gradient stops each time. This means that any duration or easing changes to the animate() will apply to the gradient as well:

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

---

Original answer

background-color is the CSS style, you are targeting the property of the javascript object, which in this case, is backgroundColor. You'll want to change the color name as well.

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

JSFiddle