使用jQuery mobile从右/左滑动个人div？

Question

我试图实现“与前一个和下一个”部分幻灯片。该部分被标记成这样：

<section class="active"> 
Section 1 
</section> 

<section> 
Section 2 
</section> 

<section> 
Section 3 
</section> 

<ul class="pager"> 
    <li><a href="#" class="prev" data-navsec="prev">Prev</a></li> 
    <li><a href="#" class="next" data-navsec="next">Next</a></li> 
</ul> 

所有部分都隐藏除一个与active类。

而且我希望下一个和上一个部分从上一个时候的左侧滑入，然后右下一个。

jQuery Mobile中不存在幻灯片功能，我可以看到。但我发现它使用jQuery UI。所以我包括那个图书馆。

但是，仍然存在问题。我只能指定元素滑动的方向。不是从哪里开始的：

$('section.active').hide('slide', {direction: 'left'}).removeClass('active').next().show('slide', {direction: 'right'}).addClass('active'); 

那么，我该如何解决这个问题？

Answer 1

这是我为你制作的JS Fiddle。希望它会给你一个清晰的想法来实现你的解决方案。

<button type="button" class="slide-left">Slide Left</button> 
<button type="button" class="slide-right">Slide Right</button> 
<hr> 
<div class="box"> 
    <div>Section 1</div> 

</div> 
<div> 
    <div>Section 2</div> 
</div> 


$(document).ready(function(){ 
    var boxWidth = $(".box").width(); 
    $(".slide-left").click(function(){ 
     $(".box").animate({ 
      width: 0 
     }); 
    }); 
    $(".slide-right").click(function(){ 
     $(".box").animate({ 
      width: boxWidth 
     }); 
    }); 
}); 

Answer 2

由于奥马尔的参考链接我做了这个，工作液：

$(document).on("pagecreate", "[data-role='page']", function() 
{ 

    $(this).find('section').not(":eq(0)").addClass("ui-screen-hidden"); 
    $(this).find("section:eq(0)").addClass("active"); 

    $(".ui-content").on("swipeleft swiperight", function (e) 
    { 

     var swipe = e.type, 
      nextStep = $(this).find("section.active").next("section"), 
      prevStep = $(this).find("section.active").prev("section"); 

     switch (true) 
     { 
      case (swipe == "swipeleft" && nextStep.length > 0): 
       $(this).find("section.active") 
        .toggleClass("slide out"); 
       break; 
      case (swipe == "swiperight" && prevStep.length > 0): 
       $(this).find("section.active") 
        .toggleClass("slide out reverse"); 
       break; 
     } 
    }); 

}).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", "section", function (e) 
{ 
    var elm = $(e.target); 

    switch (true) 
    { 
     case (elm.hasClass("out") && !elm.hasClass("reverse")): 
      $(elm).toggleClass("slide out ui-screen-hidden active"); 
      $(elm).next("section").toggleClass("slide in active ui-screen-hidden"); 
      break; 
     case (elm.hasClass("out") && elm.hasClass("reverse")): 
      $(elm).toggleClass("slide out ui-screen-hidden reverse active"); 
      $(elm).prev("section").toggleClass("slide in active reverse ui-screen-hidden"); 
      break; 
     case (elm.hasClass("in") && !elm.hasClass("reverse")): 
      elm.toggleClass("slide in"); 
      break; 
     case (elm.hasClass("in") && elm.hasClass("reverse")): 
      elm.toggleClass("slide in reverse"); 
      break; 
    } 
});