title: Jquery Gradient Animation, progress bar
body: <p>I have a  with let say a height:15px and width:300px, that will be where the gradient progress bar be animated.</p>
  
  <p>SO let say here is the document:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;a href="#container3"&gt;Container 3&lt;/a&gt;
      &lt;div id="container1" style="width:100%;height:1000"&gt;&lt;/div&gt;
      &lt;div id="container2" style="width:100%;height:650"&gt;&lt;/div&gt;
      &lt;div id="container3" style="width:100%;height:480"&gt;&lt;/div&gt;
      &lt;div id="container4" style="width:100%;height:600"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>let say there's a progress bar over there with a fixed position. so when you click the Container 3 it will scroll down to the element #container3, and the gradient progress bar width will increase as the document scrolls down, it means that the gradient progress bar is relative to the height you scrolled and will reach the full width as the element #container3 will reach the top of the screen. Scrolling can also be done manually not just by clicking Container 3</p>
  
  <p>-How can i animate gradient(left to right) background-color 
  -What will be the jquery algorithm to get the gradient width increase/decrease relative to the height you scrolled. </p>
  
  <p>Live examples are greatly appreciated </p>