Pausing progress bar as well as div rotating

问题:

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).

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; });` 

回答1:

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.

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):

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

文章来源: Pausing progress bar as well as div rotating