如何在setInterval中暫停並重新啓動動畫？

我已經寫了一個小代碼，從屏幕頂部顯示幻燈片的向下圖像。我有一個暫停按鈕來清除超時。但是我無法停止JS動畫並從停止的同一個地方繼續。如何在setInterval中暫停並重新啓動動畫？

Code : 
$.fn.pSlide = function(options) { 
     var icount = 0,interval; 
     var isPaused = false; 
     documentHeight = $('.image-container').height(), 
     documentWidth = $('.image-container').width(), 
     imageHeight = 250; 
     imageWidth = 250; 
     defaults = { 
      minSize  : 5, 
      maxSize  : 15, 
      newOn  : 8000, //controls duration of each element 
     }, 
     options = $.extend({}, defaults, options); 

     $('#control-btn').click(function() { 

      window.clearInterval(interval); 
     }); 

     interval = window.setInterval(function() { 
      if(!isPaused) { 
       var $elm = $('.image-container img').eq(icount); 
       var startPositionLeft = Math.random() * documentWidth - imageWidth , 
       startOpacity  = 0.5 + Math.random(), 
       endPositionTop  = documentHeight - 40, 
       endPositionLeft  = startPositionLeft - 100 + Math.random() * 200, 
       durationFall  = documentHeight * 10 + (Math.random() * 15000)+5000, //controls the speed of transition 
       rotateValue = Math.random(); 

       if(startPositionLeft<imageWidth) { 
        startPositionLeft = imageWidth; 
       } 

       if(rotateValue<=0.5) { 
        rotateValue = 0; 
       }else{ 
        rotateValue *= 10; 
        rotateValue *= Math.cos(Math.PI * Math.round(Math.random())); //cos(0) = 1; cos(PI) = -1 
       } 

       if(icount==20) 
        icount=0; 
       else 
        icount++; 

       $elm 
         // .clone() 
         // .appendTo($('.image-container')) 
         .css(
          { 
           left: startPositionLeft, 
           opacity: startOpacity, 
           '-webkit-transform': 'rotate(' + rotateValue +'deg)', 
           '-moz-transform': 'rotate(' + rotateValue +'deg)', 
           '-o-transform': 'rotate(' + rotateValue +'deg)', 
           '-ms-transform': 'rotate(' + rotateValue +'deg)', 
           'zoom' : 1 
          } 
         ) 
         .animate(
          { 
           top: endPositionTop, 
           left: endPositionLeft, 
           opacity: 0.2 
          }, 
          durationFall, 
          'linear', 
          function() { 

           $(this).css({'top':'-250'+'px' , '-webkit-transform': 'rotate(0)'}); 
          } 
         ); 
       } 

       },options.newOn); 
    };

來源

2013-10-20 user1184100

答案是你需要使用隊列和出隊，這裏是同一主題的問題。 jQuery Pause/Resume animate

來源

2013-10-20 17:51:15

謝謝你的回覆。我已經更新了我的代碼http://jsfiddle.net/utzqZ/3/現在我可以暫停動畫，但無法理解如何從setInterval內恢復它。 – user1184100

是的，即使我嘗試相同的，將在這裏更新 –

再次感謝你:) – user1184100

如何在setInterval中暫停並重新啓動動畫？

回答

相關問題