Javascript 使用jQuery slideUp（）动画进行页面导航

我正在尝试使用jQuery创建一个多页面导航，当我们更改页面时，当前页面将出现slideUp（）并消失

到目前为止，我有一个JS：

$(document).ready(function() {

    current = "#div1";

    $("#btn1").click(function() {

        if (current != "#div1") {
            $(current).slideUp("slow");

            current = "#div1";
        }

    });

    $("#btn2").click(function() {

        if (current != "#div2") {
            $(current).slideUp("slow");

            current = "#div2";
        }

    });

    $("#btn3").click(function() {

        if (current != "#div3") {
            $(current).slideUp("slow");

            current = "#div3";
        }

    });

});

在这个平台上运行：

我似乎无法正确地从第1页导航到第3页，从第3页导航到第2页，等等

---

任何帮助都将不胜感激：）

我已经对您的代码进行了一些重构。实际上，我并没有使用任何向上滑动的功能，所有的事情都是使用CSS动画来处理的，这意味着您以后可以将它们更改为其他内容。还要注意的是，这意味着您实际上不需要乱搞z-index。 HTML:

CSS:

---

这是小提琴：

我正忙着用小提琴为你画一些东西，给我一分钟：）非常好用，谢谢！你有时会注意到两个页面滚动（一个向上，一个向下），有没有办法解决这个问题，使你点击菜单时所处的页面保持在那里，而另一个页面滚动？有很多方法可以实现这一点，但其中许多技术都有点不自然，在这里，您必须保持z索引值，以便动画不会变得有点古怪。另一种方法是延迟删除“活动类”，如下所示：（使用js）或（使用transitiondelay）。我想你会发现，当你构建这些页面时，滑入滑出可能比滑出看起来更好，但这只是一个意见问题。

<div id="menu">
    <button class="btn" id="btn1" data-rel-page="div1">Pag1</button>
    <button class="btn" id="btn2" data-rel-page="div2">Pag2</button>
    <button class="btn" id="btn3" data-rel-page="div3">Pag3</button>
    <button class="btn" id="btn4" data-rel-page="div4">Pag4</button>
</div>
<div id="div1" class="fullscreen active">
    <center>HOME</center>
</div>
<div id="div2" class="fullscreen">
    <center>PAGE2</center>
</div>
<div id="div3" class="fullscreen">
    <center>PAGE3</center>
</div>
<div id="div4" class="fullscreen">
    <center>PAGE4</center>
</div>

$(document).ready(function () {
    var current = "div1";
    $("[data-rel-page]").bind('click', function (evt) {

        var el = $(evt.currentTarget).attr('data-rel-page');
        if (el === current) return;


        var $el = $("#" + el);
        var $cur = $("#" + current);

        current = el;


        $cur.removeClass('active');
        $el.addClass('active');
    })
});

.fullscreen {
    transition: all 0.4s linear;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 0%;
    overflow: hidden;
}

.fullscreen.active {
    display: block;
    height: 100%;
}