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(){

我有sample on 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

DEMO

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

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

jQuery，向左滑动div与文本

2 个答案: