jquery - jQuery，带文本的向左滑动 div

Question

我正在尝试将#text-slidein div 幻灯片从隐藏状态向左滑动。我一定尝试了所有变体，但无法让它发挥作用。

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

我最接近滑块工作的是当我使用以下幻灯片功能时：

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

出于某种原因，使用此代码，滑块将工作一次，然后滑块不会显示，我所看到的只是一个用于滑入的空白区域。

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

我在 jsfiddle 上有一个示例

帮助将不胜感激。谢谢

Answer 1

您在问题中发布的代码与您在 jsfiddle 中发布的代码不同，关于 jsfiddle 中的代码，问题是您正在调用

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

并且 show 的签名是特定于 jQueryUI 的，但没有引用 jQueryUI。当我检查 jQueryUI 它似乎工作。

Answer 2

演示

对您的代码进行了一些更改：

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