setInterval内でアニメーションを一時停止して再起動する方法は？

Question

私は小さなコードを書いて、画面の上からスライドする画像を書きました。 タイムアウトをクリアするための一時停止ボタンがあります。しかし、私はJSアニメーションを止めず、停止した同じ場所から続けることができません。

JSFiddle-Example

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

Answer 1

回答あなたはキューとデキューを使用する必要があり、ここでは同じトピックに関する質問です。 jQuery Pause/Resume animate