title: Getting a jquery ui progress bar to animate
body: <p>these are the codes for the two <code>&lt;div&gt;</code>s that are used to represent a progress bar (jquery ui progress bar):</p>
  
  <pre><code>&lt;div style="margin-left: 10px; margin-right: 10px; font-size: 10px;" id="progressbar2"&gt; &lt;/div&gt;
  &lt;div style="margin-left: 10px; margin-right: 10px; font-size: 10px;" id="progressbar"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>this is the jquery that is used to set the value and get the value for the progress bar </p>
  
  <pre><code>&lt;script&gt;   
  $(document).ready(function() {
      var progValue1 = &lt;%=ProgValue1%&gt;;   
      var progValue2 = &lt;%=ProgValue2%&gt;;    
      $("#progressbar").progressbar({ value: progValue1});   
      $("#progressbar2").progressbar({ value: progValue2 });   
  });   
  &lt;/script&gt;  
  </code></pre>
  
  <p>on the back end code this is how i transfer the value for the progress bar : </p>
  
  <pre><code>private int _progValue1 = 100;
  private int _progValue2 = 30;
  
  public int ProgValue1 { get { return this._progValue1; } set { _progValue1 = value; } }
  public int ProgValue2 { get { return this._progValue2; } set { _progValue2 = value; } }
  </code></pre>
  
  <p>When a confirm button is clicked this is the code used in the click method to change the value for the progress bar :</p>
  
  <pre><code>this.ProgValue1 = 0;
  this.ProgValue2 = 100;
  </code></pre>
  
  <p>this way all I am doing is changing the value of progressbar from 100 to 0 and the value of progressbar2 from 30 to 100. </p>
  
  <p><strong>Is there a way to change the value in such a fashion so that this can be animated as if the first progress bar is gradually decreasing to 0 and the progressbar2 is increasing to 100?</strong> </p>
  
  <p>Thanx in advance</p>