CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavigation
user1298923
user1298923

Reputation: 194

Page navigation using jQuery slideUp() animation

I'm trying to create a multi-page navigation using jQuery, where when we change page the current one would suffer a slideUp() and disappear.

Until now I have this 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";
        }

    });

});

Running on this: http://jsfiddle.net/93gk3oyg/

I just can't seem to correctly navigate from page 1 to 3, 3 to 2, and so on...

Any help would be appreciated :)

Upvotes: 1

Views: 808

Answers (1)

tribe84
tribe84

Reputation: 5632

I have refactored your code somewhat. I actually do not make any use of the slide-up functionality, everything is handled using CSS animations, which means you will be able to alter those to something else later. Also notice, that this means you don't really need to mess about with 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%;
}

Here is the fiddle: http://jsfiddle.net/93gk3oyg/9/

Upvotes: 1

Related Questions