title: jquery - fadeOut/fadeIn background image on hover
body: <p>I have a <code>&lt;div&gt;</code> which contains a background image, the <code>&lt;div&gt;</code> sits within a toolbar in HTML.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div id="toolbar"&gt;
     &lt;div class="image"&gt;&amp;nbsp;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#toolbar .image {
  background url('images/logo.png') no-repeat top left;
  }
  
  #toolbar .imagehover {
  background url('images/logoHover.png') no-repeat top left;
  }
  </code></pre>
  
  <p>When the mouse hovers over <code>#toolbar</code> I want the background image of <code>.image</code> to change but using <code>.fadeOut()</code> and <code>.fadeIn()</code></p>
  
  <p>So far I have:</p>
  
  <pre><code>$("#toolbar").hover(function () {
    $(".image").fadeOut("slow");
    $(".image").addClass("imagehover");
    $(".imagehover").fadeIn("slow");
    },
    function () {
    $(this).removeClass("imagehover");
  });
  </code></pre>
  
  <p>Currently the logo fades out and the hover logo fades in twice. </p>
  
  <p>Any help appreciated.</p>