JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

Библиотека jQuery UI и расширение, известное как «the jQuery Easing Plugin», определяют весьма исчерпывающий набор дополнительных функций переходов.

***********************************************

Остальные параметры анимационных эффектов имеют отношение к функциям переходов. Свойство

easing
объекта с параметрами определяет имя функции перехода. По умолчанию библиотека jQuery использует синусоидальную функцию с именем «swing». Если необходимо, чтобы анимационный эффект воспроизводился линейно, следует использовать параметры, как показано ниже:

$("img").animate({"width":"+=100"}, {duration: 500, easing:"linear"});

Напомню, что параметры

duration, easing
и
complete
можно также передавать методу
animate
в виде отдельных аргументов. То есть предыдущий анимационный эффект можно запустить так:

$("img").animate({"width":"+=100"}, 500, "linear");

Наконец, механизм воспроизведения анимационных эффектов в библиотеке jQuery позволяет даже указывать для разных CSS-свойств разные функции переходов. Сделать это можно двумя разными способами, как показано в следующем примере:

// Требуется скрыть изображения, подобно методу hide, при этом изменение

// размеров изображения должно протекать линейно, а изменение непрозрачности -

// с применением функции перехода "swing" по умолчанию

// Первый способ:

// Использовать параметр specialEasing, чтобы указать другую функцию перехода

$("img").animate({ width:"hide", height:"hide", opacity:"hide" },

{ specialEasing: { width: "linear", height: "linear" }});

// Второй способ:

// Передать массивы [целевое значение, функция перехода] в объекте,

// который передается в первом аргументе.

$("img").animate({

width: ["hide", "linear"], height: ["hide", "linear"], opacity:"hide"

});

19.5.3. Отмена, задержка и постановка эффектов в очередь

В библиотеке jQuery определяется еще несколько методов, имеющих отношение к анимационным эффектам и очередям, которые необходимо знать. Первым из них является метод

stop:
он останавливает воспроизведение текущего анимационного эффекта для выбранных элементов. Метод
stop
принимает два необязательных логических аргумента. Если в первом аргументе передать true, очередь анимационных эффектов для выбранных элементов будет очищена: т. е. вместе с текущим эффектом будут отменены все остальные эффекты, находящиеся в очереди. По умолчанию этот аргумент принимает значение false: если аргумент не указан, эффекты, находящиеся в очереди, не отменяются. Второй аргумент определяет, должны ли изменяемые CSS-свойства остаться в текущем состоянии или им должны быть присвоены конечные значения. Значение true во втором аргументе заставляет присвоить им конечные значения. Значение false (или отсутствие аргумента) оставляет текущие значения CSS-свойств.

Когда анимационные эффекты запускаются по событиям, возникающим в результате действий пользователя, может потребоваться отменить все текущие и запланированные анимационные эффекты, прежде чем запустить новые. Например:

// Сделать изображения непрозрачными, когда указатель мыши находится над ними.

// Не забудьте отменить все запланированные анимационные эффекты по событиям мыши!

$("img").bind({

mouseover: function { S(this).stop.fadeTo(300, 1.0); },

mouseout: function { S(this).stop.fadeTo(300, 0.5): }

}):

Второй метод, связанный с анимацией, который мы рассмотрим здесь, - это метод

delay.
Он просто добавляет задержку в очередь эффектов. В первом аргументе он принимает задержку в миллисекундах (или строку), а во втором необязательном аргументе - имя очереди (указывать второй аргумент обычно не требуется: об именах очередей будет рассказываться ниже). Метод
delay
можно использовать в составных анимационных эффектах, как показано ниже:

// Быстро растворить элемент до половины, подождать, а затем свернуть его

$("img").fadeTo(100. 0.5).delay(200).slideUp;

В примере выше, где применялся метод

stop,
были использованы обработчики событий «mouseover* и «mouseout* для плавного изменения непрозрачности изображений. Этот пример можно усовершенствовать, если добавить в него короткую задержку перед запуском анимационного эффекта. При таком подходе, если указатель мыши быстро пересекает изображение без остановки, никакого анимационного эффекта не возникает: