jQueryスクロール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が呼び出されるたびに移動するイメージスライドが3つあります。 showPreviousSlide/showNextSlide関数の1回の繰り返しが、スライドが再び呼び出される前に移動を完了していることを確認するにはどうすればよいですか？私はスライドショーのdivのオーバーフィルを削除しました：隠されているので、スライドショーで何が起こっているのかが分かりやすくなりました。

ありがとうございました。

モルガン

あなたはこのよう .animate()に完了コールバックを渡すことができ

Answer 1

：

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

は、その後、あなたの関数でanimationCompletedの値を確認します

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

と追加のためdocsをチェックアウト情報と例。