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); 
});