Javascript/jQuery, Display div after animation finishes
<p>here is a working jsfiddle:</p>

<p><a href="http://jsfiddle.net/YnT2X/" rel="nofollow">http://jsfiddle.net/YnT2X/</a></p>

<p>I don't want the div to display until AFTER the return animation completes. </p>

<p>jQuery:</p>

<pre><code>$(document).ready(function () {
    $("#menu").hover(function () {
        $('#arrow').hide();
        $("body").children(':not(#menu)').css("-webkit-filter", "blur(2px)");
        $(this, '#arrow').stop().animate({
            width: "200px"
        }, 250,

        function () {
            if ($('#menu').width() == '200') {
                $('.text').fadeIn(200);
            }
        });
    }, function () {
        $(this).stop().animate({
            width: "0px"
        }, 250)
        $("body").children(':not(#menu)').css("-webkit-filter", "none");
        $('.text').fadeOut('fast');
        $('#arrow').show();
    });
    });
</code></pre>
