Pausing jQuery Animation with Rotating Divs

Question

What I have been trying to do is to pause the animation at the current point when hovering the mouse over the content. So that the user can pause the rotator and view the content for a longer time, and then resume the rotator by moving the mouse away again. jQuery isn't my fortée but I don't think it should be too hard. All help is appreciated.

http://tympanus.net/codrops/2013/03/29/quotes-rotator/ (also a great place for resources in general, by the by)

The demo files can be found there. Cheers for any help.

Here's a starting JSFIddle: http://jsfiddle.net/LmuR7/

// Minimal code to allow adding the above JSFiddle link
$(function () {
    $('#cbp-qtrotator').cbpQTRotator();
});

Answer 1

OK. I was bored so did it for you. This version simply sets/resets a paused flag. Based on that flag it decides whether to go to the next item, or stay on the previous one. You can tweak the behavior, based on my changes, to suit your needs (e.g. you might want to pause the progress bar as well):

Please delete my console.log lines or it will break on non-debugging IE browsers!

To find my changes looks for paused in the code.

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

/**
 * jquery.cbpQTRotator.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */;
(function ($, window, undefined) {

    'use strict';

    // global
    var Modernizr = window.Modernizr;

    $.CBPQTRotator = function (options, element) {
        this.paused = false;
        this.$el = $(element);
        this._init(options);
    };

    // the options
    $.CBPQTRotator.defaults = {
        // default transition speed (ms)
        speed: 700,
        // default transition easing
        easing: 'ease',
        // rotator interval (ms)
        interval: 8000
    };

    $.CBPQTRotator.prototype = {
        _init: function (options) {
           var THIS = this;
            // options
            this.options = $.extend(true, {}, $.CBPQTRotator.defaults, options);
            // cache some elements and initialize some variables
            this._config();
            // show current item
            this.$items.eq(this.current).addClass('cbp-qtcurrent');
            // set the transition to the items
            if (this.support) {
                this._setTransition();
            }
            // start rotating the items
            this._startRotator();

            // Pause on hover in, resume on hover out
            this.$items.hover(function(){
                console.log("Paused");
                THIS.paused = true;
            }, function(){
                console.log("Resumed");
                THIS.paused = false;
            });

        },
        _config: function () {

            // the content items
            this.$items = this.$el.children('div.cbp-qtcontent');
            // total items
            this.itemsCount = this.$items.length;
            // current item´s index
            this.current = 0;
            // support for CSS Transitions
            this.support = Modernizr.csstransitions;
            // add the progress bar
            if (this.support) {
                this.$progress = $('<span class="cbp-qtprogress"></span>').appendTo(this.$el);
            }

        },
        _setTransition: function () {
            setTimeout($.proxy(function () {
                this.$items.css('transition', 'opacity ' + this.options.speed + 'ms ' + this.options.easing);
            }, this), 25);
        },
        _startRotator: function () {
            var THIS = this;

            if (this.support) {
                this._startProgress();
            }

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

        },
        _next: function () {

            // hide previous item
            this.$items.eq(this.current).removeClass('cbp-qtcurrent');
            // update current value
            this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0;
            // show next item
            this.$items.eq(this.current).addClass('cbp-qtcurrent');

        },
        _startProgress: function () {

            setTimeout($.proxy(function () {
                this.$progress.css({
                    transition: 'width ' + this.options.interval + 'ms linear',
                    width: '100%'
                });
            }, this), 25);

        },
        _resetProgress: function () {
            this.$progress.css({
                transition: 'none',
                width: '0%'
            });
        },
        destroy: function () {
            if (this.support) {
                this.$items.css('transition', 'none');
                this.$progress.remove();
            }
            this.$items.removeClass('cbp-qtcurrent').css({
                'position': 'relative',
                    'z-index': 100,
                    'pointer-events': 'auto',
                    'opacity': 1
            });
        }
    };

    var logError = function (message) {
        if (window.console) {
            window.console.error(message);
        }
    };

    $.fn.cbpQTRotator = function (options) {
        if (typeof options === 'string') {
            var args = Array.prototype.slice.call(arguments, 1);
            this.each(function () {
                var instance = $.data(this, 'cbpQTRotator');
                if (!instance) {
                    logError("cannot call methods on cbpQTRotator prior to initialization; " +
                        "attempted to call method '" + options + "'");
                    return;
                }
                if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
                    logError("no such method '" + options + "' for cbpQTRotator instance");
                    return;
                }
                instance[options].apply(instance, args);
            });
        } else {
            this.each(function () {
                var instance = $.data(this, 'cbpQTRotator');
                if (instance) {
                    instance._init();
                } else {
                    instance = $.data(this, 'cbpQTRotator', new $.CBPQTRotator(options, this));
                }
            });
        }
        return this;
    };

})(jQuery, window);

$(function () {
    $('#cbp-qtrotator').cbpQTRotator();
});