title: jQuery to change (with fade animation) background image of div on hover
body: <p>I am trying to change the background image of a div on hover with jQuery.
  This is what I came up so far, however, it's not working:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="logo"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.logo {
   width: 300px;
   height: 100px;
   background: url('http://placehold.it/300x100/ffffff/000000.png&amp;text=first') no-repeat center top;
  }
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>$('.logo').hover(
      function(){
          $(this).animate({backgroundImage: 'http://placehold.it/300x100/ffffff/000000.png&amp;text=second'},'fast');
      },
      function(){
          $(this).animate({backgroundImage: 'http://placehold.it/300x100/ffffff/000000.png&amp;text=first'},'fast');
  });
  </code></pre>
  
  <p><strong>jsfiddle</strong> here: <a href="http://jsfiddle.net/26j6P/1/">http://jsfiddle.net/26j6P/1/</a></p>
  
  <p>What am I doing wrong?
  If I animate the background color, it works just fine...</p>