Slide doesn't work at the second time

Question

When I click on my navigation links, the current div should slide up and the new should come down, but it only works once.

jsFiddle

 $(".nav-link").click(function(){
       var page = $(this).data("page");
       var active = $("#viewport").data("active");
       $(active).slideUp(500, function(){
           $(active).css({'display':'none'});
           $(page).slideDown(250);
           $("#viewport").attr("data-active", page);
       });
    });

I have no idea what is wrong.

Thanks!

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

Try using .data() instead of attr(), they're not the exact same

$(".nav-link").click(function(){
   var page = $(this).data("page");
   var active = $("#viewport").data("active");
   $(active).slideUp(500, function(){
       $(active).css({'display':'none'});
       $(page).slideDown(250);
       $("#viewport").data("active", page); // The updated row
   });
});

For further reading:

edited May 23 '17 at 11:49

Community

1
1

answered Aug 18 '13 at 20:08

Itay

16,601
2
51
72

@Lumoris Please see my edit. I've added links you should read to learn the differences between `.attr("data-something", value)` and `.data("something", value)`. Also, if my answer was helpful, please mark it the correct answer with the green 'V' sign. – Itay Aug 18 '13 at 20:14
And while you're at it, add in `if (active != page && $(".page:animated").size() == 0)` to prevent animation when you're already on that page and only allow one animation at a time. http://jsfiddle.net/2dZ5H/2/ – CheeseWarlock Aug 18 '13 at 20:22

score 0 · Answer 2 · answered Aug 18 '13 at 20:12

Try this

$(document).ready(function () {
    $("#startseite").css({
        'display': 'block'
    });

    $(".nav-link").click(function () {
        var page = $(this).attr("data-page");
        var active = $("#viewport").attr("data-active");
        $(active).slideUp(500, function () {
            $(active).css({
                'display': 'none'
            });
            $(page).slideDown(250);
            $("#viewport").attr("data-active", page);
            page = 0;
            active = 0;
        });
    });

    /*  $("#nav-slider").slider();*/
});

You have the same flaws using [.attr()](http://api.jquery.com/attr/) instead of [.data()](http://api.jquery.com/data/) — Itay, Aug 18 '13 at 20:15

Slide doesn't work at the second time

2 Answers2