How do I change this jquery fade in then out to a cross fade?
<p>Ok I have to two images on a page that I want to cross fade between on mouse over and on mouse out i want it to reverse so the image looks as if it reverting back to its original state.  </p>

<p>Right now I it have working by fading out the first image then fading the replacement back in as below how do I make this cross fade as above?</p>

<pre><code>$("#img-swap1 img").mouseover(function() {
      $("#img-swap1 img").fadeOut(350, function() { 
        $(this).attr("src", "images/dentalwise-hover.jpg","images/dentalwise.jpg"); 
        $(this).fadeIn(350);    
      });
    }).mouseout(function(){
        $("#img-swap1 img").fadeOut(350, function() { 
        $(this).attr("src", "images/dentalwise.jpg","images/dentalwise.jpg"); 
        $(this).fadeIn(350);    
        });    
      });
</code></pre>

<p>the html:</p>

<pre><code> &lt;div id="main-content"&gt;
        &lt;div class="featured"&gt;
            &lt;div class="featured-heading"&gt;
                &lt;h3&gt;Recent Works&lt;/h3&gt;
                &lt;p class="sub-heading"&gt;Check out my latest work&lt;/p&gt;
            &lt;/div&gt;
            &lt;p class="featured-para"&gt;
                Elementum sed pid nunc, placerat quis parturient, 
                sit nascetur? Mid placerat vel, cum scelerisque diam.
                placerat quis parturient dolorElementum sed pid
                placerat quis parturient.
            &lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="latest-w" class="pleft"&gt;
            &lt;div class="latest-img"&gt;
                &lt;a id="img-swap1" class="img-swap" href="#"&gt;
                    &lt;img src="images/dentalwise.jpg" width="191" height="129" /&gt;   
                &lt;/a&gt;    
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="latest-w" class="pleft"&gt;
            &lt;div class="latest-img"&gt;
                &lt;a id="img-swap2" class="img-swap" href="#"&gt;
                    &lt;img class="img-swap" src="images/wyevallay.jpg" width="191" height="129" /&gt;  
                &lt;/a&gt;    
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="latest-w" class="pleft"&gt;
            &lt;div class="latest-img"&gt;
                &lt;a id="img-swap3" class="img-swap" href="#"&gt;
                    &lt;img src="images/easycms.jpg" width="191" height="129" /&gt; 
                &lt;/a&gt;    
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>
