title: Animate background color like a progress bar in jQuery
body: <p>I have a <strong>div</strong> which has some text content( <strong>eg:</strong> My Name ) and the <strong>div</strong> is in <strong>RED</strong> <code>background colour</code> and a button. </p>
  
  <p><strong>My need :</strong> </p>
  
  <p>If I have clicked the button , I need to change the background of a div from <strong>RED to BLUE</strong> like <code>Progress bar</code> for <strong>10 seconds</strong>.Something like,</p>
  
  <p>start from 0 sec</p>
  
  <p>=</p>
  
  <p>==</p>
  
  <p>===</p>
  
  <p>====</p>
  
  <p>=====</p>
  
  <p>======</p>
  
  <p>=======</p>
  
  <p>========</p>
  
  <p>=========</p>
  
  <p>==========</p>
  
  <p>end with 10 seconds</p>
  
  <p>I have to change the <strong>bgColor gradually</strong> from start to end for upto 10 secs.</p>
  
  <p>So I have used the <strong>JQuery animate()</strong> method .But I have no luck to do that.</p>
  
  <p><strong>What I have tried :</strong></p>
  
  <pre><code>  $("button").click(function(){ 
          $('#myDivId').animate({background-color:'blue'},10000);
    });
  </code></pre>
  
  <p>If this is not possible , can anyone please suggest me some <strong>plugin's</strong> to do that.</p>
  
  <p>Hope our stack users will help me.</p>