使用旋转分区暂停jQuery动画

Question

我一直尝试做的是将鼠标悬停在内容上时暂停当前点的动画。这样用户可以暂停旋转器并查看内容更长的时间，然后通过再次移开鼠标来恢复旋转器。 jQuery不是我的强项，但我认为它不应该太难。感谢所有帮助。

http://tympanus.net/codrops/2013/03/29/quotes-rotator/（通常也是资源的好地方）

可以在那里找到演示文件。欢呼任何帮助。

这是一个起始的JSFIddle：http://jsfiddle.net/LmuR7/

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

Answer 1

行。我很无聊，所以为你做了。此版本只是设置/重置暂停的标志。根据该标志，它决定是转到下一个项目还是继续前一个项目。您可以根据我的更改调整行为，以满足您的需求（例如，您可能还想暂停进度条）：

请删除我的console.log行，否则会在非调试的IE浏览器中中断！

要查找我的更改，请在代码中查找paused。

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