title: Changing Bootstrap animation progress bar animation duration with jQuery
body: <p>I'm trying to change the duration of the CSS3 animation used on the Twitter Bootstrap animated progress bar.
  My desired result is to decrease the duration of the animation using jQuery so that I have a faster animation.</p>
  
  <p>I've got the following HTML and CSS and used the following jQuery.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="progress progress-striped active" style="width:102px;"&gt;
      &lt;div id="test" class="progress-bar" role="progressbar"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.progress-bar {
      background-color: #bd4a61;
      width: 100%;
  }
  </code></pre>
  
  <p>I'm using the following jQuery to change the values but this doesn't seem to have any effect. I'm using Chrome as my test browser but I seem to get the behavior in all browsers.</p>
  
  <p>jQuery:</p>
  
  <pre><code>$("#test").css("-webkit-animation-duration", "1s");
  </code></pre>
  
  <p>If I fetch the value of animation-duration after executing the jQuery it reads as being "1s" as opposed to the default "2s" but the visual effect remains unchanged.</p>
  
  <p>EDIT: Using jQuery to hide and show the element after setting the value seems to get the effect working for Internet Explorer.</p>