使用 jQuery mobile 从右/左滑入单个 div？

Posted 2023-05-08

【中文标题】使用 jQuery mobile 从右/左滑入单个 div？

【英文标题】：Slide in individual div from right/left with jQuery mobile?

【发布时间】：2017-04-11 22:22:36

【问题描述】：

我正在尝试实现“带有上一个和下一个的部分幻灯片”。这些部分的标记如下：

<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');

那么，我该如何解决呢？

【问题讨论】：

你可以这样做***.com/a/24043188/1771795

一个问题，是否可以让它们同时滑动？现在下一张幻灯片在第一张幻灯片完成后开始。

【参考方案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
        );
    );
);

【参考方案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;
    
);