slide from left to right gets stuck

Question

I have some strange problem with Multi page slide. When I press to switch pages, new page was stuck on left and then slide out ,where it needs to be. You can test this in my JSFiddle

There is my JQuery. (Im new on that)

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

}); 

Any solutions, why I have this problem?

Answer 1

You need to slide the current page out when hiding with the toggle of activetab slide to make it a smooth run. Use the following js code and see if that makes the effect you want:

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

Hope this helps.