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