jQuery，向左滑动div并显示文字

Question

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.

 $(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);
                    });
                });
            });
        });
    });
});

The closest I got the slider working was when I used the following slide function:

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

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.

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

I have a sample on jsfiddle

Help would be greatly appreciated. Thanks

Answer 1

The code you posted in your question is not the same code that you posted in the jsfiddle, regarding the code in the jsfiddle, the issue is that you're calling

                $("#text-slidein").show('slide', {
                    direction: 'right'
                }, 2000, function() {
                    $(".fade").fadeOut(1000, function() {
                        $("#menu-nav").fadeIn(1000);
                        $("#news-box").fadeIn(1000);
                    });
                });

and that signature of show is jQueryUI specific but jQueryUI isn't referenced. When I checked jQueryUI it seems to work.

Answer 2

DEMO

Made a few changes to your code:

css:

#text-slidein {
    top: 260px;
    font-family: Arial, Helvetica, sans-serif;
    color: #888;
    font-size: 17px;
    padding: 15px 0;
    width: 0px;
    height:8px;
    position: absolute;
    overflow:hidden;
    margin-left:-800px
}

jQuery:

        $("#text-slidein")
            .animate({
                width:800,
                marginLeft:0
          }, 2000, function() {
              $(".fade").fadeOut(1000, function() {
                  $("#menu-nav").fadeIn(1000);
                  $("#news-box").fadeIn(1000);
              });
          });