javascript - 使用 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
        });
    });
});