Наконец, механизм воспроизведения анимационных эффектов в библиотеке jQuery позволяет даже указывать для разных CSS-свойств разные функции переходов. Сделать это можно двумя разными способами, как
показано в следующем примере:
// Требуется скрыть изображения, подобно методу hide, при этом изменение
// размеров изображения должно протекать линейно, а изменение непрозрачности -
// с применением функции перехода "swing" по умолчанию
// Первый способ:
// Использовать параметр specialEasing, чтобы указать другую функцию перехода
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* для плавного изменения непрозрачности изображений. Этот пример можно усовершенствовать, если добавить в него короткую задержку перед запуском анимационного эффекта. При таком подходе, если указатель мыши быстро пересекает изображение без остановки, никакого анимационного эффекта не возникает:
$("img"). bind({
mouseover: function { S(this).stop(true).delay(100).fadeTo(300, 1.0): },
mouseout: function { S(this).stop(true).fadeTo(300, 0.5): }
});
Последняя группа методов, с которыми мы познакомимся, предоставляют низкоуровневый доступ к механизму очередей в библиотеке jQuery. Очереди в библиотеке jQuery реализованы в виде списков функций, которые выполняются в порядке их следования. Каждая очередь связана с определенным элементом документа (или с объектом
Document
или
Window
), и все очереди в элементах не зависят друг от друга. Добавить новую функцию в очередь можно с помощью метода
queue.
Когда функция достигнет головы очереди, она будет автоматически исключена из очереди и вызвана. Внутри этой функции ключевое слово
this
ссылается на элемент, с которым связана данная очередь. В единственном аргументе функции будет передана другая функция. Когда функция из очереди завершит свою работу, она должна вызвать переданную ей функцию; тем самым она запустит следующую операцию из очереди. Если эта функция не будет вызвана, обработка очереди будет заморожена и оставшиеся в ней функции никогда не будут вызваны.
Мы уже знаем, что методам анимационных эффектов можно передавать функции обратного вызова для выполнения некоторых действий по завершении воспроизведения эффекта. Того же эффекта можно добиться, поместив эту функцию в очередь:
// Проявить элемент, подождать, записать в него текст, и изменить его рамку
}).animate({borderWidth: "+=10рх;"}); // Увеличить толщину рамки
Аргумент с функцией, который передается функции, помещаемой в очередь, - это новая особенность, появившаяся в версии jQuery 1.4. При использовании более ранних версий библиотеки функции в очереди извлекали следующую функцию «вручную», вызывая метод
dequeue
:
$(this).dequeue; // Вместо next
Если очередь пуста, метод
dequeue
ничего не делает. В противном случае он удаляет функцию, находящуюся в голове очереди, и вызывает ее, устанавливая значение ссылки
this
и передавая функцию, описанную выше.
Кроме того, существует еще несколько методов управления очередью вручную. Метод
clearQueue
очищает очередь. Если вместо единственной функции передать методу
queue
массив функций, он заменит текущую очередь новым массивом функций. А вызов метода
queue(
) без аргумента вернет текущую очередь в виде массива. Кроме того, библиотека jQuery определяет версии методов
queue
и
dequeue
в виде вспомогательных функций. Например, если потребуется добавить функцию f в очередь элемента е, сделать это можно будет с помощью метода или функции: