如何在div到達結束後停止動畫？

Question

我正在爲Magento網站構建精選產品滑塊，並且我在jQuery中使用了.animate方法來允許div滑動隱藏的內容。我是新來的Javascript/jQuery，我似乎無法找到任何答案來幫助我（我也不知道正確的術語）

我需要.animate停止後，它已達到結束隱藏的div（這是200％）請參閱下面的代碼。

$(function() { 
     $('button.next-button').click(function() { 
     $("#featured-slide").animate({right: '+=20%'}); 
     }); 
}); 

    $(function() { 
     $('button.back-button').click(function() { 
     $("#featured-slide").animate({right: '-=20%'}); 
     }); 
}); 

有太多的HTML要發佈，但＃featured-slide是200％寬。有沒有辦法擁有一個最大的正確位置或類似的東西？

我是新來的堆棧溢出和jQuery的一般，所以任何幫助將非常感激。

感謝

Answer 1

我居然發現一個不相關的職位，有關於這個問題的jsfiddle。請參閱http://jsfiddle.net/qpHSw/

var cur = 1; 
var max = $("#featured-slide").children("li").length; 

$('button.next-button').click(function() { 

if (cur+1 > max) return; 
    cur++; 

$("#featured-slide").animate({ 
     right: "+=200px"}); 
}); 

$('button.back-button').click(function() { 

if (cur-1 < 1) return; 
    cur--; 

$("#featured-slide").animate({ 
     right: "-=200px"}); 
});