« Плагин Cycle для библиотеки jQuery. Часть 2
Закладки: CSS и фоновое изображение »

Плагин Cycle для библиотеки jQuery. Часть 3

28 Октябрь 2008, 13:34

Опции speedIn/speedOut и easeIn/easeOut позволяют более полно управлять эффектом перехода. Фактически, эти опции расширяют возможности опций speed и easing:

$.fn.cycle.defaults = {
    ...
    speed:       1000,  // speed of the transition (any valid fx speed value)
    speedIn:     null,  // speed of the "in" transition
    speedOut:    null,  // speed of the "out" transition
    ...
    easing:      null,  // easing method for both in and out transitions
    easeIn:      null,  // easing for "in" transition
    easeOut:     null,  // easing for "out" transition
    ...
};

Свойства speedIn и easeIn определяют скорость и easing-эффект при появлении следующего кадра. Если эти свойства не определены, они будут установлены в значения speed и easing соответственно.

Свойства speedOut и easeOut определяют скорость и easing-эффект при исчезновении текущего кадра. Если эти свойства не определены, они будут установлены в значения speed и easing соответственно.

Чтобы полностью использовать все возможности плагина Cycle необходимо понять назначение четырех опций:

  • cssBefore - стиль кадра перед его появлением
  • animIn - эффект при появлении нового кадра
  • cssAfter - стиль текущего кадра в момент его исчезновения
  • animOut - эффект при исчезновении текущего кадра

Для использования этих опций установите свойство fx в значение custom.

Если вы создали интересный эффект перехода, то его можно сохранить для дальнейшего использования:

$('#s6').cycle({
    fx: 'custom',
    cssBefore: { 
        top:  0,
        left: 0,
        width: 0,
        height: 0, 
        zIndex: 1 
    },
    animIn:  { 
        width: 200,
        height: 200 
    },
    animOut: { 
        top:  200,
        left: 200,
        width: 0,
        height: 0
    },
    cssAfter: { 
        zIndex: 0 
    }
});

Добавляем функцию:

$.fn.cycle.transitions.pinch = function($cont, $slides, opts) {
    var $el = $($slides[0]);
    var w = $el.width();
    var h = $el.height();
    opts.cssBefore = { top: 0, left: 0, width: 0, height: 0, zIndex: 1 };
    opts.animIn    = { width: w, height: h };
    opts.animOut   = { top: h, left: w, width: 0, height: 0 };
    opts.cssAfter  = { zIndex: 0 };
};

Пример использования:

$('#s1').cycle('pinch');

Опция nowrap запрещает переход к первому кадру после того, как был показан последний кадр.

Ссылки по теме:

Рубрика: JavaScript  |  Отзывы (RSS)  |  Трекбек

Оставьте свой отзыв