如何在 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