title: Is there a way to animate the transition from text-align left to center in an input box
body: <p>Fiddle: <a href="http://jsfiddle.net/p7gFh/" rel="nofollow">http://jsfiddle.net/p7gFh/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;input id = 'box' value = 'some text'/&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#box {
      text-align:left;
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$('#box').on('click', function() {
      $(this).css({'textAlign':'center'}, 500);
  });
  </code></pre>
  
  <p>Right now the text just snaps to the center on click. I tried .animate() but nothing happened. Is there a way to animate a smooth transition from text-align left to center without snapping?</p>