javascript - 从左向右滑动卡住

Question

我在使用多页幻灯片时遇到了一些奇怪的问题。当我按下切换页面时，新页面卡在左侧，然后滑出，它需要的地方。您可以在我的 JSFiddle 中进行测试

这是我的 JQuery。 (我是新手)

$(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

使用activetab slide的切换隐藏时需要将当前页面滑出才能流畅运行。使用下面的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);
  });
}); 

希望这对您有所帮助。