重写 jQuery 以左右滚动

Question

我需要帮助重写我的jQuery。 我在顶部有四个链接："一，二，三，四"

当你从一 ->二时，它从右边擦拭。 完善！

当你从两个 -> One 进入时，它会从右侧擦除。 不理想。 我希望它从左侧向内滑动。

依此类推，基于每个的位置。 这容易吗？

http://jsfiddle.net/5N3YK/126/

.HTML：

<a data-section="one" href="#">One</a>
<a data-section="two" href="#">Two</a>
<a data-section="three" href="#">Three</a>
<a data-section="four" href="#">Four</a>
<div id="hello">
    <section id="one" class="active">One</section>
    <section id="two">Two</section>
    <section id="three">Three</section>
    <section id="four">Four</section>
</div>

.CSS：

#hello, #hello section{
    min-width: 350px;
    height:330px;
    background:green;
}
#hello section{
    position: absolute;
    left:100%;
}
#hello{
    position: relative;
    overflow: hidden;
    width:90%;
}
#hello section:nth-child(1){left:0%}

j查询：

$('a').on('click', function(event) {
    event.preventDefault();
    var sectionId = $(this).attr("data-section"),
        $toSlide = $("#hello section#" + sectionId),
        $fromSlide = $('.active');
    if (!($toSlide.hasClass("active"))) {
        $fromSlide.animate({
            "left": "-100%"
        }, 500, 'linear')
        $toSlide.animate({
            "left": "0%"
        }, 500, 'linear', function() {
            $fromSlide.css("left", "100%");
            $fromSlide.removeClass("active");
            $toSlide.addClass("active");
        });
    }
});

Answer 1

正如@James所指出的 - 这个不会完全按照你想要的方式执行，但它很小，简单，而且幻灯片！（只是比你的多一点:)

jsBin 演示

这就是您所需要的：

.HTML

<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
<div id="hello">
    <section>One</section>
    <section>Two</section>
    <section>Three</section>
    <section>Four</section>
</div>

jQuery

$('a').click(function(event) {
    event.preventDefault();
    $('#hello').stop().animate({scrollLeft: $(this).index() * $('#hello').width() },700);
});

.CSS

#hello, #hello section{
    min-width: 350px;
    height:330px;
    background:green;
}   
#hello{
  position: relative;
  overflow:hidden;
  width:90%;
  white-space:nowrap;
}
section{
    width:100%;
    display:inline-block;
    *display:inline;
    zoom:1;
    vertical-align:middle;
    margin-right:-4px;
}

Answer 2

这段代码不像roXon的那么漂亮，但保留了原始的滚动机制。 当你从一到四个时，roXon 的代码将滚动浏览所有不同的选项，而这个代码将直接跳到四个。

在这里查看。

编辑：请注意，此代码并非完美无缺。我在下面对 roXon 出色的调试结果添加了部分修复，但它仍然无法完全经受住疯狂的点击。如果这就是你想要的，你会想要再修复一下，以便它处理疯狂的点击。