title: Animate only background-position X axis
body: <p>I want to animate the background-position X axis but leave the Y axis as 'bottom'.</p>
  
  <p>I have been able to animate the X axis using:</p>
  
  <pre><code>$('#imageholder').animate({'background-position' : mousePosX});
  </code></pre>
  
  <p>However, this resets the Y position which on my CSS file is set as <code>bottom</code>.</p>
  
  <p>I have tried combining <code>mousePosX</code> and <code>bottom</code>, eg:</p>
  
  <pre><code>$('#heroimageholder').animate({'background-position' : mousePosXPercent + " bottom"});
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>var bgpos = mousePosXPercent + " bottom";
  $('#heroimageholder').animate({'background-position' : bgpos});
  </code></pre>
  
  <p>With no results.</p>
  
  <p>Is there a way to make <code>.animate()</code> work with multiple css values?</p>