using jquery animation with fadeout effect
<p>I created some jQuery, which should do the following: when you hover inside the <code>div</code>, its contents will animate to the left or top, and then on mouseout it will come back to 0px and it will fadeout.</p>

<p>I was able to do it but it doesn't run smoothly when it gets to mouseout. </p>

<p>Here's my fiddle: <a href="http://jsfiddle.net/AufTr/" rel="nofollow">http://jsfiddle.net/AufTr/</a></p>

<p>Here's my code:</p>

<pre><code>$(document).ready(function() {
    $(".button").hover(function() {
        $(this).find(".le").css("display", "block");
        $(this).find('.h1').animate({
            left: '-300px',
            top: '130px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find('.h2').animate({
            left: '80px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find('.h3').animate({
            top: '130px'
        }, {
            queue: false,
            duration: 500
        });
    },
    function() {
        $(this).find('.h2').animate({
            left: '0px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find('.h3').animate({
            top: '0px'
        }, {
            queue: false,
            duration: 500
        });
        $(this).find(".h1").animate({
            left: '0px',
            top: '0'
        }, "normal", function() {
            setTimeout(function() {
                $('.le').fadeOut('fast');
            }, 0, {
                queue: false,
                duration: 500
            });
        });
    });
});​
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div style="background:#98bf21;height:200px;width:200px; margin:0 auto;" class="button"&gt;
&lt;div class="h1 le" style="background:#CCCCCC; display:none; position:relative"&gt;
&lt;img src="http://b.vimeocdn.com/ps/797/797108_300.jpg" width="300" height="300" border="0" alt="" /&gt;&lt;/div&gt;
&lt;div class="h2 le" style="background:#FF0000; display:none; position:relative"&gt;Responsive&lt;/div&gt;
&lt;div class="h3 le" style="background:#00FF00; display:none; position:relative"&gt;View&lt;/div&gt;
</code></pre>

<p>​</p>
