title: How to animate a change in css using jQuery
body: <p>Is it possible to animate a change in css using jquery? </p>
  
  <p>If someone would be so kind as to provide me with an example i would be much obliged.</p>
  
  <p>Essentially, i am trying to animate the sprites technique by manipulating the background-image in the css using jQuery. The goal is to animate the hover so that I get a nice fade instead of just the abrupt switch produced by the code below.</p>
  
  <p>Here is where I'm at: </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;h1 id="solomon"&gt;Solomon&lt;/h1&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>body#default h1 {
  text-indent: -9999px;
  display: inline-block;
  height: 213px;
  }
  body#default h1#solomon {
      background: transparent url(/images/S.gif) center top no-repeat;
      width: 183px;
      margin: 100px 0 0 216px;
      }
  </code></pre>
  
  <p>JQUERY: </p>
  
  <pre><code>$(function() {
  $('h1').hover(function() {
      $(this).stop().css('background-position', 'center bottom');
  }, function() {
      $(this).stop().css('background-position', 'center top');
  });
  });
  </code></pre>
  
  <p>Right now the it works fine, but there is no pretty animation on hover. I want to know how to animate the effect of switching the background-image placement.</p>
  
  <p>Thanks to whomever takes a shot at this. :) </p>
  
  <hr>
  
  <p>i'm hoping someone can answer my question without pointing me to a tutorial? my issue with the tutorials is that they all force me to change my html which i am pretty locked into at this point. </p>
  
  <p>also, why doesn't the animate function work in my above example (@CMS)? </p>
  
  <p>thanks for your help everyone! :)</p>