Bir setInterval içindeki bir animasyon nasıl duraklatılır ve yeniden başlatılır?

Question

Ekranın üstünden görüntüleri aşağı kaydıran küçük bir kod yazdım. Zaman aşımını temizlemek için bir duraklatma düğmem var. Ancak JS animasyonunu durduramam ve durdurulan yerden devam edemiyorum.

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

Answers kuyruğu ve Dequeue kullanmak gerekir burada, aynı konuyla ilgili bir sorudur. jQuery Pause/Resume animate