jquery - fadeOut/fadeIn background image on hover
<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>
