слайд слева направо застревает

Question

У меня есть странная проблема с многостраничным слайдом. Когда я нажимаю для переключения страниц, новая страница застревает слева, а затем выдвигается, где она должна быть. Вы можете проверить это в моих JSFiddle

Есть мой JQuery. (Im новый по этому вопросу)

$(document).ready(function(){ 
$("div.page-content div.page").hide(); 
$(".page-content div.page:first-child").show(); 

$("a.edit").click(function() { // EDIT BUTTON 
    $("div.page-content .page").hide(); 
    var activeTab = $(this).attr("href"); 
    var effect = 'slide';var options = { direction: 'right'};var duration = 1000; 
    $(activeTab).toggle(effect, options, duration); 
}); 

$("a.back").click(function() { // BACK BUTTON 
    $("div.page-content .page").hide(); 
    var activeTab = $(this).attr("href"); 
    var effect = 'slide';var options = { direction: 'left'};var duration = 1000; 
    $(activeTab).toggle(effect, options, duration); 
}); 

}); 

Любые решения, почему у меня есть эта проблема?

Answer 1

Вам необходимо сдвинуть текущую страницу при скрытии с помощью переключателя slideetab, чтобы сделать его плавным. Используйте следующий код js и посмотрите, не делает ли это того, что вы хотите:

$(document).ready(function(){ 
$("div.page-content div.page").hide(); 
$(".page-content div.page:first-child").show(); 

    $("a.edit").click(function() { // EDIT BUTTON 
    $("div.page-content .page").hide("slide", { direction: "left" }, 1000); 
    $($(this).attr("href")).delay(1000).toggle('slide', { direction: "right" }, 1000); 
    }); 

    $("a.back").click(function() { // BACK BUTTON 
    $("div.page-content .page").hide("slide", { direction: "left" }, 1000); 
    $($(this).attr("href")).delay(1000).toggle('slide', { direction: "right" }, 1000); 
    }); 
}); 

Надеюсь, это поможет.