jquery - 暂停进度条以及 div 旋转

Question

我希望在悬停时暂停进度条，与 div 内容的方式相同(尽管进度条在前进，但您会注意到它会暂停)。

下面是 JSFiddle:http://jsfiddle.net/LmuR7/1/ (使用这里的插件:http://tympanus.net/codrops/2013/03/29/quotes-rotator/)

添加了额外的代码以允许在内容悬停时暂停:

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

Answer 1

最大的问题是进度条使用CSS动画而不是代码。要停止它，您需要计算出它在哪里，然后要重新启动它，您需要计算出完成需要多长时间。

我重构了暂停/恢复代码，因此不需要额外的计时器。我之前遇到的错误是 'width ' + THIS.options.interval - elapsed 首先将 'width ' + THIS.options.interval 评估为字符串(只是缺少一些括号):

JSFiddle:http://jsfiddle.net/LmuR7/5/

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

_暂停方法:

    _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: 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);
    },