jQuery setTimeout issue

Question

私は、それらをクロスフェードすることによってたくさんの画像をアニメーション化する単純な機能を持っています。簡単なバナーの回転。私はanimateSlideshow("play")を呼び出すように関数を設定して、タイムアウトを設定してアニメーションを開始し、animateSlideshow("stop")を呼び出すと停止する必要があります。

私がstopを呼び出すと、アニメーションがもう一度発生します。この1つの余分なアニメーションの原因は何ですか？どうすれば対処できますか？

これはあなたがかなりのsetTimeout（）を使用して関数を呼び出すよりも、するsetIntervalを（）/てclearInterval（）を使用する必要があります下

function prevSlide(e){ 

    if(curHashIndex !== 0){ 

     $(prevBtn).off(); 

     // Stop the current slideshow 
     animateSlideshow("stop"); 

     // Reset the current slideshow 
     $("li.active .rightSlide > li").fadeOut(600).eq(0).fadeIn(600).addClass("actvImg"); 

     $(".rightSlides").animate({ 
      "left" : '+=345' 
     }, 600, function(){ 
      $(prevBtn).on('click', prevSlide); 
     }); 

     $(".leftSlides").animate({ 
      "left" : '+=417' 
     }, 600); 

     // Activate the new slide 
     $(".rightSlides li.active").removeClass("active").prev().addClass("active"); 
     activeSlide = $(".rightSlides li.active"); 
     total = $(".rightSlides li.active .rightSlide > li").length; 

     // Start slideshow on the new slide 
     var delay = setTimeout(animateSlideshow("play"), 10000); 

     updateHash(); 
    } 

} 





function animateSlideshow(action){ 

    if(action === "play"){ 
     $(activeSlide).data('animateSlideshow', 
      setTimeout(function(){ 

       if($(actvImg).index() === total - 1){ 
        $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").siblings().eq(0).fadeIn(animationSpeed).addClass("actvImg"); 
       }else{ 
        $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").next().fadeIn(animationSpeed).addClass("actvImg"); 
       } 

       actvImg = $(".rightSlides li.active .rightSlide > li.actvImg"); 
       actvImgIndx = $(actvImg).index(); 
       updateBreadcrumbs(); 
       animateSlideshow("play") 

      }, animationTimeout) 
     ); 
    }else{ 
     clearTimeout($(activeSlide).data('animateSlideshow')); 
    }; 

}; 

Answer 1

上の関数を呼び出します。

function animateSlideshow(action){ 

if(action === "play"){ 
    $(activeSlide).data('animateSlideshow', 
     setInterval(function(){ 

      if($(actvImg).index() === total - 1){ 
       $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").siblings().eq(0).fadeIn(animationSpeed).addClass("actvImg"); 
      }else{ 
       $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").next().fadeIn(animationSpeed).addClass("actvImg"); 
      } 

      actvImg = $(".rightSlides li.active .rightSlide > li.actvImg"); 
      actvImgIndx = $(actvImg).index(); 
      updateBreadcrumbs(); 

     }, animationTimeout); 
    ); 
}else{ 
    clearInterval($(activeSlide).data('animateSlideshow')); 
}; 

}; 

Answer 2

私はそれはあなたのために失敗している理由はわからないが、私は同様のデモを試してみました、それは私のために働いた。..

DEMOここ

また、私は停止する.stop()を使用現在のアニメーションそのオブジェクトの現在のアニメーションを停止したい場合に使用できます。