jquery如果最后一个元素到达，如何停止动画

Question

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

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

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

我有两个按钮：PREV和NEXT;这个按钮允许用户查看页面。 有7个页面，从页面提前开始4

感谢

DEMO

$('#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

既然有已经是一个overflow-hidden，家长就可以改变它的scrollLeft位置：

fiddle demo

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.animate({scrollLeft: n}); 
}); 

Answer 2

这里有一个解决方案：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); 
});