使用 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

感谢 Omar 的参考链接，我做了这个，可行的解决方案：

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