动画队列累积与Galleriffic 2.0

时间:2011-01-13 19:40:11

标签: javascript jquery animation image-gallery

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

我是jquery btw的新手。使用jQuery 1.4.4和Galleriffic 2.0,并一直在处理Galleriffic下载中包含的示例。

1 个答案:

答案 0 :(得分: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);