Чтение онлайн

на главную - закладки

Жанры

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

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

$("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* для плавного изменения непрозрачности изображений. Этот пример можно усовершенствовать, если добавить в него короткую задержку перед запуском анимационного эффекта. При таком подходе, если указатель мыши быстро пересекает изображение без остановки, никакого анимационного эффекта не возникает:

$("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,
а по завершении каждая операция должна запускать следующую.

19.6. Реализация Ajax в библиотеке jQuery

Ajax - популярное название комплекса приемов разработки веб-приложений, в которых применяются возможности использования протокола HTTP (глава 18) для загрузки данных по мере необходимости без перезагрузки страниц. Приемы Ajax оказались настолько полезны в современных веб-приложениях, что в библиотеку jQuery были включены вспомогательные функции, реализующие и упрощающие их использование. Библиотека jQuery определяет один высокоуровневый вспомогательный метод и четыре высокоуровневые вспомогательные функции. Все они основаны на одной низкоуровневой функции,

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

Поделиться:
Популярные книги

Русские дети (сборник)

Фрай Макс
Проза:
современная проза
5.60
рейтинг книги
Русские дети (сборник)

Хозяин Стужи 8

Петров Максим Николаевич
8. Злой Лед
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Хозяин Стужи 8

За короля и отечество

Асприн Роберт Линн
Фантастика:
фэнтези
альтернативная история
6.25
рейтинг книги
За короля и отечество

Отмороженный

Гарцевич Евгений Александрович
1. Отмороженный
Фантастика:
боевая фантастика
рпг
5.00
рейтинг книги
Отмороженный

Тринадцатый VIII

NikL
8. Видящий смерть
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Тринадцатый VIII

Одержимая (авторский сборник)

Дяченко Марина и Сергей
Фантастика:
фэнтези
научная фантастика
7.80
рейтинг книги
Одержимая (авторский сборник)

Кодекс Охотника. Книга XVII

Винокуров Юрий
17. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга XVII

Эволюционер из трущоб. Том 4

Панарин Антон
4. Эволюционер из трущоб
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Эволюционер из трущоб. Том 4

Викинг

Мазин Александр Владимирович
1. Викинг
Приключения:
исторические приключения
8.92
рейтинг книги
Викинг

Кодекс Охотника. Книга XXXII

Винокуров Юрий
32. Кодекс Охотника
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Кодекс Охотника. Книга XXXII

Кондотьер

Листратов Валерий
7. Ушедший Род
Фантастика:
фэнтези
боевая фантастика
аниме
попаданцы
5.00
рейтинг книги
Кондотьер

Бродяга. Книга вторая

Первухин Андрей Евгеньевич
2. Бродяга
Фантастика:
фэнтези
фантастика: прочее
попаданцы
5.00
рейтинг книги
Бродяга. Книга вторая

Пересмешник

Пехов Алексей Юрьевич
Фантастика:
фэнтези
9.38
рейтинг книги
Пересмешник

Черный Маг Императора 20

Герда Александр
20. Черный маг императора
Фантастика:
юмористическое фэнтези
аниме
сказочная фантастика
фэнтези
фантастика: прочее
попаданцы
5.00
рейтинг книги
Черный Маг Императора 20