jQuery Scrolling SlideShow

Question

В настоящее время я создаю прокручиваемое слайд-шоу с нуля и столкнулся с проблемой.

Когда я нажимаю следующую кнопку несколько раз, слайды начинают работать вместе, как я могу убедиться, что следующий слайд ждет, пока текущий слайд не остановится до следующего запуска.

var scrollAmount=910 
    var image0Left=-scrollAmount; 
    var image1Left=0; 
    var image2Left=scrollAmount; 
    var scrollSpeed0=2000; 
    var scrollSpeed1=2000; 
    var scrollSpeed2=2000; 
    $(document).ready(function() { 
     $("#left-arrow").click(showPreviousSlide); 
     $("#right-arrow").click(showNextSlide); 
    }); 

    function showPreviousSlide(){ 
     image0Left+=scrollAmount; 
     if(image0Left > scrollAmount){ 
      image0Left=-scrollAmount; 
      scrollSpeed0=0; 
     } 

     image1Left+=scrollAmount; 
     if(image1Left > scrollAmount){ 
      image1Left=-scrollAmount; 
      scrollSpeed1=0; 
     } 

     image2Left+=scrollAmount; 
     if(image2Left > scrollAmount){ 
      image2Left=-scrollAmount; 
      scrollSpeed2=0; 
     } 

     $("#slide0").animate({left: image0Left}, scrollSpeed0); 
     scrollSpeed0=2000; 
     $("#slide1").animate({left: image1Left}, scrollSpeed1); 
     scrollSpeed1=2000; 
     $("#slide2").animate({left: image2Left}, scrollSpeed2); 
     scrollSpeed2=2000; 
    } 

    function showNextSlide() { 
     image0Left-=scrollAmount; 
     if(image0Left < -scrollAmount){ 
      image0Left=scrollAmount; 
      scrollSpeed0=0; 
     } 

     image1Left-=scrollAmount; 
     if(image1Left < -scrollAmount){ 
      image1Left=scrollAmount; 
      scrollSpeed1=0; 
     } 

     image2Left-=scrollAmount; 
     if(image2Left < -scrollAmount){ 
      image2Left=scrollAmount; 
      scrollSpeed2=0; 
     } 


     $("#slide0").animate({left: image0Left}, scrollSpeed0); 
     scrollSpeed0=2000; 
     $("#slide1").animate({left: image1Left}, scrollSpeed1); 
     scrollSpeed1=2000; 
     $("#slide2").animate({left: image2Left}, scrollSpeed2); 
     scrollSpeed2=2000; 
    } 

Это все управляющий код сценария. Вот ссылка на фактический сайт. Site

Существует три слайда изображений, которые перемещаются при каждом вызове showPreviousSlide или showNextSlide. Как я могу убедиться, что одна итерация функции showPreviousSlide/showNextSlide закончена, перемещая слайды, прежде чем она будет вызвана снова? Я удалил мой слайд-шоу div overfill: скрытый, чтобы было легче увидеть, что происходит на моем слайд-шоу.

Благодарим за помощь.

Morgan

Answer 1

Вы можете пройти завершающий обратный вызов .animate() так:

animationCompleted = false; 
$("#slide0").animate({left: image0Left}, scrollSpeed0, function() { 
    animationCompleted = true; 
}); 

Затем проверьте значение animationCompleted в ваших функциях:

function showPreviousSlide(){ 
    if (!animationCompleted) return; 
    // ... 
} 

И проверить docs для дополнительного информации и примеров.