jquery 如何在到达最后一个元素时停止动画

Question

我有一个水平滚动条。
如何在到达最后一个元素时停止动画？

使用偏移量？宽度？位置？...

如果没有更多元素可显示，如何实现停止任何动画？ 但允许回去吗？

我有两个按钮：PREV 和 NEXT；该按钮允许用户查看页面。 从第4页开始共有7页。

提前致谢

演示

$('#page_holder').animate({left: '-=546px'}, 0);

$('.prev').click(function(){
    $('#page_holder').animate(
    {left: '+=182px'},{
    duration: 1000, 
    easing: 'easeOutBack'
    });
});

$('.next').click(function(){
    $('#page_holder').animate(
    {left: '-=182px' },{
    duration: 1000, 
    easing: 'easeOutBack'
    });
});

Answer 1

这是一种解决方案：http://jsfiddle.net/vkNg4/2/

var cur = 1;
var max = $(".page").length+1;

$('#page_holder').animate({left: '-=546px'}, 0);

$('.ll').click(function(){
    if (cur-1 < 1) return;
    cur--;
    $('#page_holder').animate(
    {left: '+=182px'},{
    duration: 1000, 
    easing: 'easeOutBack'
    });
    alert(cur);
});


$('.rr').click(function(){
    if (cur+1 > max) return;
    cur++;
    $('#page_holder').animate(
    {left: '-=182px' },{
    duration: 1000, 
    easing: 'easeOutBack'
    });
    alert(cur);
});

Answer 2

由于已经有一个

overflow-hidden

，父级我们可以更改它的

scrollLeft

位置：

小提琴演示

var $par = $('#container').scrollLeft(546) ; // Get the element that has CSS overflow
                                             // and set to initial position
$('.prev, .next').click(function( e ) {
    e.preventDefault();                      // Prevent default Anchors behavior
    var n = $(this).hasClass("next") ? "+=182" : "-=182"; // Direction
    $par.stop().animate({scrollLeft: n});
});