jQueryモバイルで右または左から個々の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クラスと1以外隠されています。

そして、前のセクションを左からスライドし、次のセクションを右からスライドします。

スライド機能は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; 
    } 
});