使用Galleriffic2.0构建动画队列

Question

我正在尝试弄清楚如何使用stop()函数来停止Galleriffic所产生的动画堆积。当你快速而重复地将鼠标移到缩略图上时，就会发生这种情况。我知道在一个简单的jquery脚本中，你会使用stop()函数和animate函数，但是galleriffic使用了太多的代码，我不确定在哪里以及如何应用它。

我是jquery btw的新手。使用jQuery 1.4.4和Galleriffic2.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);