title: How to addClass and removeClass with fade via jQuery?
body: <p>I'm trying to fade one image into another.  I tried the CSS route by making the top image transparent on hover, but that's not going to work in my case.  In my case, on hover, I'm trying to fade my logo into my logo with a glow.  The logos aren't a perfect shape, so having the two pictures on top of one another is redundant, since the user can see the "over" picture, aka logo with a glow, without hovering over it.</p>
  
  <p>I found jQuery's <code>addClass</code> and <code>removeClass</code> and thought that'd work.  So far, it has, except that the fading isn't occurring.  Instead, it's just immediately switching to the on-hover image.<br>
  <strong><a href="http://jsfiddle.net/8tx36/" rel="nofollow">Here's a Fiddle of my code</a></strong>, except that my logo has been replaced by an apple and the over-logo has been replaced by an orange, since my logo pictures are locally stored.</p>
  
  <p>The JavaScript I have in the Fiddle is this:</p>
  
  <pre><code>$(document).ready(function() {
      $('img#logo').hover(
     function(){ $(this).stop(true).addClass('over', 500) },
     function(){ $(this).stop(true).removeClass('over', 500) });
  });
  </code></pre>
  
  <p>And here is my HTML:</p>
  
  <pre><code>&lt;img id="logo" class="top" width="256" height="256" /&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>img.top {
      background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
  }
  
  img.over {
      background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
  }
  </code></pre>
  
  <p>Thoughts?  Thanks!</p>