Question

我写了一个小代码，从屏幕顶部滑下来的图像。我有一个暂停按钮来清除超时。但是我无法阻止JS动画并从停止的同一个地方继续。

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

如何在setInterval中暂停和重新启动动画？

1 个答案: