Остановить .animate() на последнем изображении

Question

Я пытаюсь создать галерею изображений для прокрутки с помощью кнопок вверх/вниз. Пока я иду анимацию, но теперь мне нужно остановить ее на первом и последнем изображении.

Это то, что я до сих пор, jsfiddle.net/sJDMq/47 (не против кнопок, мне еще нужно работать на них, но они есть, верхние и нижние красные коробки)

Спасибо!

$(document).ready(function() { 

    $(".down_button").click(function() {  
     $(".scroll-products").animate({marginTop: '-=700px'}, 300); 
    }); 

    $(".up_button").click(function() { 
     $(".scroll-products").animate({ marginTop: '+=700px' }, 300); 
    }); 
}); 

Answer 1

Я бы не сделал это так, но только собираюсь с тем, что вы начали с я бы просто позволить этому JS сделать трюк:

$(document).ready(function(){ 
    var curIndex = 0; 
    var height = 700; 
    var maxHeight = 0; 
    var allImages = document.getElementsByClassName("sidebar_images"); 
    for(var i=0; i<allImages.length; i++) { 
    maxHeight += allImages[i].offsetHeight; 
    } 
    var maxIndex = Math.ceil(maxHeight/height); 

    $(".down_button").click(function() { 
    if(curIndex < maxIndex) { 
     $(".scroll-products").animate({marginTop: '-='+height+'px'}, 300); 
     curIndex++; 
    } 
    }); 
    $(".up_button").click(function() { 
    if(curIndex > 0){ 
     $(".scroll-products").animate({ marginTop: '+='+height+'px' }, 300); 
     curIndex--; 
    } 
    }); 
}); 

Я только что обновил свою скрипку here.