title: jQuery .animate() a single CSS attribute that has multiple values
body: <p>I'm trying to animating the background-position of an element using jQuery's .animate() method. The background-position attribute is set by defining both the x and y values, like so:</p>
  
  <pre><code>background-position: 100px 100px;
  </code></pre>
  
  <p>Webkit now supports a <code>background-position-x</code> and <code>background-position-y</code>, but it is not yet supported in Firefox. If I animate only one value — </p>
  
  <p>eg.
  <code>$(div).animate({'background-position':'200px'}, 1000);</code> — it automatically animated the X value and not the way. I can't find a way to animate the the Y value independently. </p>
  
  <p>Is it a matter of getting the syntax right? Some trick with concatenation? </p>
  
  <p>Note: I did get this to work in webkit using background-position-y, but would like FF support as well.</p>