glisser de gauche à droite est bloqué

Question

J'ai un problème étrange avec la diapositive multi-page. Lorsque j'appuie sur pour changer de page, la nouvelle page est bloquée à gauche, puis glissée là où elle doit être. Vous pouvez le tester dans mon JSFiddle

Il y a mon JQuery. (Im nouveau là-dessus)

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

}); 

Des solutions, pourquoi j'ai ce problème?

Answer 1

Vous devez faire glisser la page en cours lorsque vous vous cachez avec la bascule de la diapositive activetab pour qu'elle soit fluide. Utilisez le code js suivant et voyez si cela produit l'effet que vous voulez:

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

Espérons que cela vous aide.