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问题

回答

相关问题