暂停进度条以及div旋转 [英] Pausing progress bar as well as div rotating

问题描述

我希望在悬停时暂停进度条，与div内容相同（尽管进度条正在进行，您会注意到暂停）。

I'm looking to pause the progress bar on hover, the same way as with the div content (which you'll notice pauses despite the progress bar progressing).

以下是JSFiddle： http：// jsfiddle .net / LmuR7 / 1 / （使用来自此处的插件： http ：//tympanus.net/codrops/2013/03/29/quotes-rotator/ ）

Here is the JSFiddle below: http://jsfiddle.net/LmuR7/1/ (using plugin from here: http://tympanus.net/codrops/2013/03/29/quotes-rotator/)

并添加了额外的代码以允许暂停内容悬停：

And the extra code added to allow for pause on hover of the content:

// Pause on hover in, resume on hover out
this.$items.hover(function(){
   THIS.paused = true;
}, function(){
   THIS.paused = false;
});`

推荐答案

最大的问题是进度条使用CSS动画和不是代码。要停止它你需要找出它的位置，然后重新启动它你需要计算完成它需要多长时间。

The biggest problem is that the progress bar uses CSS animation and not code. To stop it you need to work out where it is, then to restart it you need to work out how long it should take to finish.

我已经重新构建了暂停/恢复代码，这样就不需要额外的计时器了。我之前的错误是'width'+ THIS.options.interval - 已过去评估'width'+ THIS.options.interval 首先作为字符串（只是缺少一些括号）：

I have restructered the pause/resume code, so that an extra timer was not needed. The previous bug I had was down to 'width ' + THIS.options.interval - elapsed evaluating 'width ' + THIS.options.interval as a string first (just missing some brackets):

        // Pause on hover in, resume on hover out
        this.$items.hover(function () {
            THIS._pause(true);
        }, function () {
            THIS._pause(false);
        });

_暂停方法：

_pause method:

    _pause: function (pause) {
        var THIS = this;
        if (THIS.paused != pause) {
            THIS.paused = pause;
            if (THIS.support) {
                var elapsed = (new Date()) - THIS.start;
                //console.log("elapsed: " + elapsed);
                var percentage = elapsed / THIS.options.interval * 100;
                if (pause) {
                    // Stop the progress animation at its current position
                    THIS.$progress.css({
                        transition: 'none',
                        width: percentage + "%"
                    });
                } else {
                    // Restart the progress bar based on remaining time left
                    setTimeout(function () {
                        //console.log("duration: " + (THIS.options.interval - elapsed));
                        THIS.$progress.css({
                            transition: 'width ' + (THIS.options.interval - elapsed) + 'ms linear',
                            width: '100%'
                        });
                    }, 25);
                }
            }
        }
    },

_startRotator更改：

这需要额外检查，以便每次都没有重置进度条（如果暂停）。

_startRotator changes:

This needed an extra check so that the progress bar was not reset each time (if paused).

    _startRotator: function () {
        var THIS = this;
        this.start = new Date();
        if (this.support) {
            this._startProgress();
        }

        setTimeout(function () {
            if (THIS.support && !THIS.paused) {
                THIS._resetProgress();
            }
            if (!THIS.paused) {
                THIS._next();
            }
            THIS._startRotator();
        }, THIS.options.interval);
    },

这篇关于暂停进度条以及div旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！