Построение очереди анимации с Galleriffic 2.0 - PullRequest
Новая
       2

Построение очереди анимации с Galleriffic 2.0

0 голосов
/ 13 января 2011

Я пытаюсь выяснить, как использовать функцию stop (), чтобы остановить наращивание анимации, которое происходит с Galleriffic.Это происходит, когда вы наводите курсор мыши на миниатюрные изображения быстро и многократно.Я знаю, что в простом скрипте jquery вы использовали бы функцию stop () с функцией animate, но galleriffic использует столько кода, что я не совсем уверен, где и как его применить.к JQuery кстати.Используя jQuery 1.4.4 и Galleriffic 2.0, мы работали над примерами, включенными в загрузку Galleriffic.

1 Ответ

1 голос
/ 16 мая 2011

Хорошо, наконец-то разобрался.Оказывается, что исчезновение прозрачности при наведении мыши на миниатюры обрабатывается скриптом с именем "jquery.opacityrollover.js".

Прозрачность не анимируется с помощью функции «animate» jquery, а вместо этого анимируется с помощью функции «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);
...