Слайд не работает во второй раз

Question

Когда я нажимаю на мои навигационные ссылки, текущий div должен скользить вверх, а новый должен опускаться, но он работает только один раз.

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

Я понятия не имею, что это неправильно.

Спасибо!

Answer 1

Попробуйте использовать .data() вместо attr(), они не точно такой же

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

Для дальнейшего чтения:

• What's the difference between jquery's data(key,val) and attr(data-key,data-val)

• jQuery data() vs attr(data)

• jQuery Data vs Attr?

Answer 2

Попробуйте это

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