使用 jQuery slideUp() 动画的页面导航

Question

我正在尝试使用 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";
        }

    });

});

运行对此：http://jsfiddle.net/93gk3oyg/

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

任何帮助将不胜感激:)

Answer 1

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

<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>

JS：

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

CSS:

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

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

这是fiddle：http://jsfiddle.net/93gk3oyg/9/

使用 jQuery slideUp() 动画的页面导航

Page navigation using jQuery slideUp() animation

html

javascript

css

navigation

jquery