使用 Galleriffic 2.0 建立动画队列

Question

我试图弄清楚如何使用 stop() 函数来停止 Galleriffic 发生的动画构建。当您快速且重复地将鼠标悬停在缩略图上时，就会发生这种情况。我知道在一个简单的 jquery 脚本中，您可以将 stop() 函数与 animate 函数一起使用，但是 galleriffic 使用了太多代码，我不确定在哪里以及如何应用它。

顺便说一句，我是 jquery 新手。使用 jQuery 1.4.4 和 Galleriffic 2.0，并一直在研究 Galleriffic 下载中包含的示例。

Answer 1

好吧，终于想通了。事实证明，当鼠标悬停在缩略图上时透明度逐渐消失是由名为“jquery.opacityrollover.js”的脚本处理的。

透明度不是使用 jquery“animate”函数进行动画处理，而是使用“fadeTo”函数进行动画处理。代码如下所示：

/**
 * jQuery Opacity Rollover plugin
 *
 * Copyright (c) 2009 Trent Foley (http://trentacular.com)
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */
;(function($) {
var defaults = {
    mouseOutOpacity:   0.67,
    mouseOverOpacity:  1.0,
    fadeSpeed:         'fast',
    exemptionSelector: '.selected'
};

$.fn.opacityrollover = function(settings) {
    // Initialize the effect
    $.extend(this, defaults, settings);

    var config = this;

    function fadeTo(element, opacity) {
        var $target = $(element);

        if (config.exemptionSelector)
            $target = $target.not(config.exemptionSelector);    

        $target.fadeTo(config.fadeSpeed, opacity);
    }

    this.css('opacity', this.mouseOutOpacity)
        .hover(
            function () {
                fadeTo(this, config.mouseOverOpacity);
            },
            function () {
                fadeTo(this, config.mouseOutOpacity);
            });

    return this;
};
})(jQuery);

所以我通过试验和测试发现你所要做的就是更改

$target.fadeTo(config.fadeSpeed, opacity);

为

$target.stop().fadeTo(config.fadeSpeed, opacity);