echofon's website like Logo's Hover Effect
<h1>What I Want</h1>

<p>First, Go here -> <a href="http://www.echofon.com/twitter/windows/" rel="nofollow">http://www.echofon.com/twitter/windows/</a> and then, hover your mouse over the Echofon logo on the top bar ( top-left corner ). I want to achieve the same thing.</p>

<h1>What I am doing</h1>

<p>I have two images -> logo1.png and logo2.png. When a user hovers over the img tag with src:logo1.png, the current logo should fade out and the logo2.png should fade in just like the echofon logo. I tried to do it myself and the code is given below:</p>

<pre><code>$(document).ready(function(){
$(".mainlogo")
    .mouseover(function() { 
        $(this).fadeOut('slow',function(){
            $(this).attr("src", "/CSS/logo2.png");
            $(this).fadeIn();
        });
    })
    .mouseout(function() {
        $(this).fadeOut('slow',function(){
            $(this).attr("src", "/CSS/logo1.png");
            $(this).fadeIn();
        });
    });
});
</code></pre>

<h1>The Problem with the Code</h1>

<p>Yes, the script is working, but the problem is that the timing is wrong. on hover, logo1.png completely fades out leaving behind a blank space and then logo2.png appears. But, I want the same effect as echofon logo. Please Help.</p>
