1. Затухающие элементы: fadeIn (), fadeOut () и fadeTo ()
2. Отображение и скрытие элементов: show () и hide ()
3. Скользящие элементы вверх и вниз: slideUp (), slideDown () и slideToggle ()
4. Анимация любого свойства CSS: animate ()
5. Создание последовательности анимаций
6. 1. Метод цепочки
7. 2. Функции обратного вызова
8. Метод queue ()
9. Добавление задержек
10. Остановка анимации
11. Резюме

Одна из замечательных особенностей jQuery - смехотворно легко анимировать элементы страницы. В то время как раньше вам приходилось возиться с setTimeout () или setInterval () и множество JavaScript-кода, с помощью jQuery вы можете творить чудеса, используя всего одну или две строки кода.

В этом уроке мы рассмотрим некоторые из наиболее распространенных эффектов, которые вы можете достичь с помощью jQuery. Мы посмотрим на:

• Выцветающие элементы внутри и снаружи
• Отображение и скрытие элементов
• Скользящие элементы вверх и вниз
• Анимация любого числового свойства CSS
• Создание анимационной последовательности
• Вставка задержек в анимацию и
• Остановка анимации.

Готовы? Давайте идти!

Затухающие элементы: fadeIn (), fadeOut () и fadeTo ()

В jQuery есть 2 простые в использовании функции для затухания текста, изображений или других элементов страницы:

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

Продолжительность по умолчанию составляет 400 миллисекунд.

Вы также можете использовать функцию fadeTo () для постепенного перехода элемента к определенному значению непрозрачности. Чтобы использовать его, вы передаете длительность (обязательно), а затем непрозрачность цели (от 0 до 1).

Вот пример, который показывает, как работают fadeIn (), fadeOut () и fadeTo ():

Попробуйте!

Обратите внимание: fadeIn () будет только постепенно уменьшать элемент до его существующего значения непрозрачности. Например, если вы устанавливаете непрозрачность элемента равной 0,5 и скрываете ее с помощью display: none, тогда вы вызываете fadeIn (), элемент будет затухать только до 50% непрозрачности, а не до 100%.

fadeOut (), с другой стороны, всегда приводит к исчезновению непрозрачности элемента. После исчезновения он также довольно легко настраивает отображаемый элемент: ни один, чтобы он больше не занимал место на странице.

Отображение и скрытие элементов: show () и hide ()

Методы jQuery show () и hide () позволяют открывать и скрывать элементы соответственно. Вызванные без каких-либо параметров, они мгновенно отображают или скрывают выбранные элементы. Однако, если вы передадите параметр duration, jQuery постепенно анимирует ширину, высоту и непрозрачность элемента (ов).

Вот пример, который демонстрирует эти различные способы использования show () и hide ():

Попробуйте!

Скользящие элементы вверх и вниз: slideUp (), slideDown () и slideToggle ()

slideUp () и slideDown () скрывают и показывают элементы, анимируя их высоту. slideUp () скрывает элемент, уменьшая его высоту до нуля, в то время как slideDown () раскрывает элемент, увеличивая его высоту от нуля до нормальной высоты.

Этот эффект отлично подходит для таких вещей, как аккордеоны где вы хотите, чтобы показать и скрыть блоки содержимого в списке.

Как и в случае с fadeIn () и его друзьями, вы можете указать необязательный аргумент продолжительности. Если вы не укажете продолжительность, анимация по умолчанию будет 400 миллисекунд.

Как только slideUp () завершил скрытие элемента, он также устанавливает значение отображения элемента равным none.

slideToggle () переключает состояние элемента. Если элемент в данный момент скрыт, его можно открыть, сдвинув его вниз. Если он в настоящее время виден, он скрыт, сдвинув его вверх. Еще раз, вы можете указать аргумент длительности или оставить длительность по умолчанию равной 400 миллисекундам.

Вот пример, который показывает, как использовать slideUp (), slideDown () и slideToggle ():

Попробуйте!

Анимация любого свойства CSS: animate ()

В то время как предыдущие методы jQuery анимируют определенные свойства элемента, такие как непрозрачность и высота, метод animate () может анимировать любое свойство CSS, которое принимает числовое значение. Вы даже можете анимировать несколько свойств элемента одновременно с помощью одного вызова animate (). Ницца!

Чтобы указать свойство или свойства для анимации, вы передаете карту пар имя / значение в animate (). Например:

Метод обычно предполагает, что ваши значения в пикселях, если вы не указали единицу измерения. Вы также можете указать проценты (%) или ems (em), где это необходимо.

animate () также позволяет вам указывать значения, относящиеся к текущим значениям элемента, используя «+ =» и «- =». Например, width: '+ = 50' будет анимировать ширину элемента, пока она не станет на 50 пикселей больше, чем его текущая ширина.

Вместо числовых значений вы можете указать строки 'show', 'hide' или 'toggle', чтобы показать, скрыть или переключить элемент соответственно. Затем animate () анимирует свойство, чтобы отобразить или скрыть элемент соответствующим образом. Например, width: 'hide' уменьшит ширину элемента до нуля, а затем скроет элемент.

animate () принимает значение длительности в качестве необязательного второго аргумента. Это ведет себя как аргумент продолжительности в предыдущих методах.

В animate () есть нечто большее, чем то, что мы рассмотрели здесь, включая функции замедления и другие параметры. Узнайте больше в документация по jQuery ,

Вот пример, который показывает, как анимировать позицию, непрозрачность, ширину и высоту элемента одновременно:

Попробуйте!

Создание последовательности анимаций

Вы можете связать анимации jQuery вместе, чтобы сформировать последовательность анимированных эффектов. Есть 3 способа сделать это:

1. Метод цепочки
2. Функции обратного вызова
3. Метод queue ()

Давайте кратко рассмотрим каждую технику:

1. Метод цепочки

Возможно, вы уже знакомы с цепочкой методов в jQuery. Это работает так: когда вы вызываете метод для объекта jQuery, метод делает свое дело, а затем возвращает тот же самый объект jQuery. Затем вы можете вызвать другой метод для возвращаемого объекта, который снова возвращает объект и так далее. Это позволяет вам вызывать много разных методов объекта одновременно, всего одной строкой кода:

Когда вы создаете цепочку методов анимации таким образом, jQuery ставит в очередь анимации. После завершения первой анимации запускается вторая анимация и т. Д.

Вот пример, который использует цепочку методов для настройки последовательности из 2 анимаций - быстрое исчезновение, затем медленное возвращение обратно:

Попробуйте!

Кстати, вы также можете записать вызовы методов длинного пути, если вы предпочитаете:

Важным моментом является то, что вы вызываете методы один за другим для создания последовательности анимации.

2. Функции обратного вызова

Все методы анимации jQuery могут принимать функцию обратного вызова в качестве необязательного аргумента. Для большинства методов это второй аргумент (после продолжительности). Для animate () это четвертый аргумент после функции замедления (см. страница API jQuery для animate () ).

Эта функция обратного вызова вызывается, когда анимация завершается. Функция обратного вызова может затем запустить другую анимацию, тем самым создав последовательность анимации.

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

Давайте воспользуемся функциями обратного вызова, чтобы воссоздать эффект «исчезновения и возврата» из приведенного выше примера цепочки методов:

Попробуйте!

Метод queue ()

Последний способ создать последовательность анимации - использовать метод queue (). Этот метод позволяет вам напрямую манипулировать очередью анимаций, назначенных элементу.

Передав функцию обратного вызова в метод queue (), вы можете добавить обратный вызов в конец очереди. Когда эта точка в очереди достигнута, ваш обратный вызов вызывается. В качестве переменной this передается анимируемый элемент. Обратный вызов может затем поставить в очередь больше анимаций на элементе (или сделать что-то еще, если хотите).

Другими словами, использование queue () похоже на передачу функции обратного вызова в метод анимации (методика 2 выше). Основным преимуществом queue () является то, что вы можете добавить функцию обратного вызова в очередь после вызова начального метода анимации.

Для того, чтобы очередь анимаций двигалась, ваш обратный вызов должен вызвать метод dequeue () для элемента. Это приводит к обработке следующего элемента в очереди.

Вот тот же эффект, созданный в последних 2 примерах, но вместо этого выполненный с использованием queue ():

Попробуйте!

queue () может сделать намного больше, кроме добавления обратных вызовов в очередь анимации. Увидеть JQuery Docs для деталей.

Добавление задержек

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

Как и любой другой метод анимации, вы можете использовать delay () внутри цепочки методов или внутри обратных вызовов, запускаемых в очереди.

Давайте возьмем наш пример создания цепочки методов из предыдущего и добавим 2-секундную задержку между постепенным исчезновением и постепенным появлением (изменения выделены жирным шрифтом):

Попробуйте!

Остановка анимации

Часто полезно иметь возможность останавливать анимацию в своих треках. Например, если вы создали кнопку с эффектом анимированного ролловера, анимация остановится, если пользователь отодвинет мышь от кнопки.

Метод stop () останавливает текущую анимацию элемента:

Это хорошо для отдельной анимации, но что если вы настроили очередь анимаций? В этом случае stop () останавливает текущую анимацию и переходит к следующей анимации в очереди.

Если вы также хотите остановить все анимации в очереди, передайте аргумент true в stop ():

По умолчанию stop () полностью останавливает анимацию в своих дорожках. Например, если вы затеняли элемент, он был бы оставлен в полупрозрачном состоянии. Чтобы предотвратить это, вы можете передать второй аргумент true в stop (). Затем анимация останавливается, и элемент переходит к концу анимации, как будто анимация прошла естественным образом:

Вот наш зеленый квадрат ранее, на этот раз медленно двигаясь слева направо. Ссылка «Начать анимацию» использует animate (), чтобы начать движение зеленого блока. «Остановить анимацию» вызывает stop () без каких-либо аргументов, останавливая блок в его дорожках, в то время как «Остановить анимацию и переходить к концу» вызывает stop () с истинными аргументами, чтобы очистить очередь и переместить блок в конец его выполнения:

Попробуйте!

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

Резюме

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

Вы можете узнать больше о методах jQuery для создания анимации в Категория эффектов на сайте jQuery.

Удачного кодирования! 🙂

Похожие

Комментарии