title: jQuery animate not actually animating, but it is getting to the desired property
body: <p>I'm using jQuery's animate to build a progress bar.</p>
  
  <p>I've tried a few different combinations of code, but I always get the same result. The animate() method seems to work, but I can't actually <em>see</em> the element getting animated. After the function is complete, the element is hidden (by another process). If I restart the process again, I see that the element has reached the desired width, but not visibly, as an animation. What am I missing?</p>
  
  <pre><code>            $("#progressbar").animate({
              width:'100px'
              }, {
              duration: 1500,
              easing: 'linear',
              complete: function() {
                  console.log('done!')
              }
          });
  </code></pre>
  
  <p>Here is the original CSS for the #progressbar element:</p>
  
  <pre><code>#progressbar{
  width:1px;
  background-color:pink;
  display:block;
  }
  </code></pre>
  
  <p>I've tried different combinations of code, including without the "easing" property. The callback works, and it does in fact get to be 100px. I've copied code from other sites and put it in, with no results, which leads me to believe I might be having some kind of CSS issue, but I'm not sure. </p>
  
  <p>To be clear, I'm not using jQuery UI for this (although, for the record, I have it installed on the page and I'm using for another function. I just tried removing it, and it didn't seem to have an effect).</p>