Jquery 如何在动画到达div末尾后停止动画？

我正在为一个Magento网站构建一个特色产品滑块，我使用了jQuery中的.animate方法来允许div滑动隐藏的内容。我是Javascript/jQuery新手，似乎找不到任何帮助我的答案（而且我也不知道正确的术语）

我需要的。动画停止后，它已经达到了隐藏的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供我发布，但#特色幻灯片的宽度为200%。是否有一种方法可以获得最大正确位置或类似的位置

我对堆栈溢出和jQuery都是新手，所以非常感谢您的帮助

---

谢谢

事实上，我发现了一篇与此问题无关的帖子，上面有一个与此问题相关的JSFIDLE。请看

var cur=1；
var max=$（“特色幻灯片”）.儿童（“li”）.长度；
$（'button.next button'）。单击（函数（）{
如果（cur+1>max）返回；
cur++；
$（“#特色幻灯片”）。制作动画({
右：“+=200px”}）；
} );
$（'button.back button'）。单击（函数（）{
如果（cur-1<1）返回；
cur--；
$（“#特色幻灯片”）。制作动画({
右：“-=200px”}）；
});

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