jQuery setTimeout問題

我有一個簡單的函數，通過交叉淡入淡出一串圖像來動畫。一個簡單的橫幅旋轉。我設置的功能，以便呼籲animateSlideshow("play")它應該設置超時和開始動畫，並呼籲animateSlideshow("stop")它應該停止。jQuery setTimeout問題

但是，當我呼叫停止時，動畫會再次發生。這一個額外的動畫是什麼原因，我該如何處理？

此呼籲底部

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

};

來源

2012-01-12 Serg Chernata

您應該使用的setInterval（）函數/ clearInterval（），而不是使用setTimeout的回顧（）的函數。

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

};

來源

2012-01-12 20:47:13 Scottux

實際上它對我來說同樣有效。我最初編寫的功能間隔。 – 2012-01-12 21:06:31

它應該至少讓你不用用setTimeout（）重新綁定數據 - 我們可能需要看看什麼在調用這個函數，或者知道這個問題是否存在某個瀏覽器。這個函數應該按照預期工作。 – Scottux 2012-01-12 21:52:50

我用打電話的功能更新了我的第一篇文章。 – 2012-01-13 14:27:56

我不知道爲什麼它是失敗的你，但我嘗試過類似的演示和它的工作對我來說..

DEMO這裏

另外，我用.stop()停止當前的動畫。如果要停止該對象上的當前動畫，可以使用它。

來源

2012-01-12 20:48:25

必須是我的代碼中的其他地方的錯誤。我會嘗試添加停止。 – 2012-01-12 21:07:01

jQuery setTimeout問題

回答

相關問題