jquery - 如何滚动到下一个 & 下一个 & 下一个......元素

Question

    <div class="wrap">
        <div class="layer">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
        </div>
    </div>
<span class="next" style="cursor:pointer;"> (next div) </span>

带有 ScrollTo 插件的 jQuery ( http://demos.flesler.com/jquery/scrollTo/ )

$('.next').click(function() {
    $(".wrap").scrollTo( $('.post').next(), 800, {margin:true} );
});

演示:http://jsfiddle.net/UaGjs/8/

这不起作用:( 仅第一次有效

Answer 1

根据 Tomalak 的答案，您需要更新 obj 指向下一个元素的引用

http://jsfiddle.net/UaGjs/7/

var next;
$('.next').click(function() {
   if ( next === undefined ) {
     next = $('.post').next();
   } else {
      next = next.next();   
   }
   $(".wrap").scrollTo(next , 800, {margin:true} );
});

我已经用 Prev 更新了它，但可以对其进行改进以删除重复

http://jsfiddle.net/UaGjs/10/

我注意到有一个名为 Serial Scroll 的伴随插件

最终编辑

http://jsfiddle.net/nickywaites/UaGjs/13/