jQuery, Slide Left div with text
<p>I am trying to slide the #text-slidein div slide left from a hidden state.
I must have tried all variations but could not get it to work.</p>

<pre><code> $(document).ready(function() {
    $("#top-2").animate({
        "top": "0px"
    }, 1500, 'easeOutExpo');
    $("#btm-2").animate({
        "top": "0px"
    }, 1500, 'easeOutExpo', function() {
        $("#top-1").animate({
            "top": "0px"
        }, 1500, 'easeOutExpo');
        $("#btm-1").animate({
            "top": "0px"
        }, 1500, 'easeOutExpo', function() {
            $("#top-3").animate({
                "top": "0px"
            }, 1500, 'easeOutExpo');
            $("#btm-3").animate({
                "top": "0px"
            }, 1500, 'easeOutExpo', function() {
                $("#row-top").animate({
                    "top": "-25"
                }, 1000, 'easeOutExpo');
                $("#row-btm").animate({
                    "top": "25px"
                }, 1000, 'easeOutExpo');
                $("#text-slidein").animate({
                    width: 'toggle'
                }, 350, 1000, function() {
                    $(".fade").fadeOut(1000, function() {
                        $("#menu-nav").fadeIn(1000);
                        $("#news-box").fadeIn(1000);
                    });
                });
            });
        });
    });
});
</code></pre>

<p>The closest I got the slider working was when I used the following slide function:</p>

<pre><code>$("#text-slidein").show('slide', {direction: 'right'}, 2000, function(){
</code></pre>

<p>For some reason, using this code, the slider would work once and then the slider would not show and all I see is a blank space where is used to slide in.</p>

<pre><code>$("#text-slidein").show('slide', {direction: 'right'}, 2000, function(){
</code></pre>

<p>I have a <a href="http://jsfiddle.net/philoman/SPVXw/5/" rel="nofollow">sample on jsfiddle</a></p>

<p>Help would be greatly appreciated. Thanks</p>
