Книга: JavaScript. Подробное руководство, 6-е издание
19.5.3. Отмена, задержка и постановка эффектов в очередь
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 ссылается на элемент, с которым связана данная очередь. В единственном аргументе функции будет передана другая функция. Когда функция из очереди завершит свою работу, она должна вызвать переданную ей функцию; тем самым она запустит следующую операцию из очереди. Если эта функция не будет вызвана, обработка очереди будет заморожена и оставшиеся в ней функции никогда не будут вызваны.
Мы уже знаем, что методам анимационных эффектов можно передавать функции обратного вызова для выполнения некоторых действий по завершении воспроизведения эффекта. Того же эффекта можно добиться, поместив эту функцию в очередь:
// Проявить элемент, подождать, записать в него текст, и изменить его рамку
$("«message").fadeIn().delay(200).queue(function(next) {
$(this).text("Пpивeт, Мир!"); // Вывести текст
next(); // Запустить следующую функцию в очереди
}).animate({borderWidth: "+=10рх;"}); // Увеличить толщину рамки
Аргумент с функцией, который передается функции, помещаемой в очередь, - это новая особенность, появившаяся в версии jQuery 1.4. При использовании более ранних версий библиотеки функции в очереди извлекали следующую функцию «вручную», вызывая метод dequeue():
$(this).dequeue(); // Вместо next()
Если очередь пуста, метод dequeue() ничего не делает. В противном случае он удаляет функцию, находящуюся в голове очереди, и вызывает ее, устанавливая значение ссылки this и передавая функцию, описанную выше.
Кроме того, существует еще несколько методов управления очередью вручную. Метод clearQueue() очищает очередь. Если вместо единственной функции передать методу queue() массив функций, он заменит текущую очередь новым массивом функций. А вызов метода queue() без аргумента вернет текущую очередь в виде массива. Кроме того, библиотека jQuery определяет версии методов queue() и dequeue() в виде вспомогательных функций. Например, если потребуется добавить функцию f в очередь элемента е, сделать это можно будет с помощью метода или функции:
$(е).queue(f); // Создать объект jQuery, хранящий е. и вызвать метод queue
jQuery.queue(e,f); // Просто вызвать вспомогательную функцию jQuery.queue()
Наконец, обратите внимание, что методы queue(), dequeue() и clearQueue() принимают необязательный первый аргумент с именем очереди. Методы анимационных эффектов используют очередь с именем «fx» и именно эта очередь используется по умолчанию, если имя очереди не указано явно. Механизм очередей в библиотеке jQuery с успехом можно использовать для выполнения асинхронных операций в определенной последовательности: вместо того чтобы передавать функцию обратного вызова каждой асинхронной операции, чтобы она запускала следующую функцию в последовательности, для управления последовательностью можно использовать очередь. Просто используйте имя очереди, отличное от «fx», и не забывайте, что функции в очереди не вызываются автоматически. Чтобы запустить первую функцию в очереди, необходимо явно вызвать метод dequeue(), а по завершении каждая операция должна запускать следующую.
Оглавление книги
