Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

Супер-Легкие Анимированные Эффекты с JQuery

  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 простые в использовании функции для затухания текста, изображений или других элементов страницы:

fadeIn ([длительность]) Затухает выделенный элемент (ы) от прозрачного до непрозрачного fadeOut ([длительность]) Затухает выбранный элемент (ы) от непрозрачного до прозрачного

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

'fast' Выполняет анимацию за 200 миллисекунд. 'slow' Выполняет анимацию за 600 миллисекунд. Целочисленное значение. Выполняет анимацию за указанное количество миллисекунд.

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

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

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

<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script type = "text / javascript" src = "http://ajax.googleapis.com/ ajax / libs / jquery / 1.4.2 / jquery.min.js "> </ script> <script type =" text / javascript "> $ (init); function init () {$ ('# fadeIn'). click (function () {$ ('# myText'). fadeIn ();}); $ ('# fadeOut'). click (function () {$ ('# myText'). fadeOut ();}); $ ('# fade50'). click (function () {$ ('# myText'). fadeTo (400, .5);}); } </ script> </ head> <body> <blockquote id = "myText"> Я думаю, что он прав, в этом есть что-то, это ... это настолько черное, что-то вроде: "Сколько еще черного может быть ?» и ответ таков: «Нет, нет ... больше черного». </ blockquote> <ul> <li> <a id="fadeIn" href="#"> Fade in </a> </ li> < li> <a id="fadeOut" href="#"> Затухание </a> </ li> <li> <a id="fade50" href="#"> Затухание до 50% непрозрачности </a> </ li> </ ul> </ body> </ html>

Попробуйте!

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

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

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

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

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

<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script type = "text / javascript" src = "http://ajax.googleapis.com/ ajax / libs / jquery / 1.4.2 / jquery.min.js "> </ script> <script type =" text / javascript "> $ (init); function init () {$ ('# show'). click (function () {$ ('# myText'). show ();}); $ ('# hide'). click (function () {$ ('# myText'). hide ();}); $ ('# showSlow'). click (function () {$ ('# myText'). show ('slow');}); $ ('# hideSlow'). click (function () {$ ('# myText'). hide ('slow');}); } </ script> </ head> <body> <blockquote id = "myText"> Я думаю, что он прав, в этом есть что-то, это ... это настолько черное, что-то вроде: "Сколько еще черного может быть ?» и ответ таков: «Нет, нет ... еще больше черного». </ blockquote> <ul> <li> <a id="show" href="#"> Показать </a> </ li> <li > <a id="hide" href="#"> Скрыть </a> </ li> <li> <a id="showSlow" href="#"> Показать медленно </a> </ li> < li> <a id="hideSlow" href="#"> Скрыть медленно </a> </ li> </ ul> </ body> </ html>

Попробуйте!

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

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

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

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

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

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

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

<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script type = "text / javascript" src = "http://ajax.googleapis.com/ ajax / libs / jquery / 1.4.2 / jquery.min.js "> </ script> <script type =" text / javascript "> $ (init); function init () {$ ('# slideUp'). click (function () {$ ('# myText'). slideUp ();}); $ ('# slideDown'). click (function () {$ ('# myText'). slideDown ();}); $ ('# slideToggle'). click (function () {$ ('# myText'). slideToggle ();}); } </ script> </ head> <body> <blockquote id = "myText"> Я думаю, что он прав, в этом есть что-то, это ... это настолько черное, что-то вроде: "Сколько еще черного может быть ?» и ответ таков: «Нет, нет ... больше черного». </ blockquote> <ul> <li> <a id="slideUp" href="#"> Слайд вверх </a> </ li> < li> <a id="slideDown" href="#"> Слайд вниз </a> </ li> <li> <a id="slideToggle" href="#"> Слайд вверх / вниз </a> < / li> </ ul> </ body> </ html>

Попробуйте!

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

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

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

$ ('# myDiv'). animate ({свойство1: значение1, свойство2: значение2, ...});

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

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

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

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

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

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

<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <style type = "text / css"> #myBlock {background: green; ширина: 100 пикселей; высота: 100 пикселей; положение: относительное; } </ style> <script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script> <script type = "text / javascript"> $ (init); function init () {$ ('# moveRight'). click (function () {$ ('# myBlock'). animate ({left: '500px', непрозрачность: .5, ширина: '50px', высота: ' 50px '});}); $ ('# moveLeft'). click (function () {$ ('# myBlock'). animate ({left: 0, opacity: 1, width: '100px', height: '100px'});}); } </ script> </ head> <body> <div id = "myBlock"> </ div> <ul> <li> <a id="moveRight" href="#"> Переместить вправо </a> < / li> <li> <a id="moveLeft" href="#"> Переместить влево </a> </ li> </ ul> </ body> </ html>

Попробуйте!

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

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

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

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

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

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

object.method1 () метод2 () method3 ()..;

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

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

<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script type = "text / javascript" src = "http://ajax.googleapis.com/ ajax / libs / jquery / 1.4.2 / jquery.min.js "> </ script> <script type =" text / javascript "> $ (init); function init () {$ ('# fadeOutAndIn'). click (function () {$ ('# myText'). fadeOut ('fast'). fadeIn ('slow');}); } </ script> </ head> <body> <blockquote id = "myText"> Я думаю, что он прав, в этом есть что-то, это ... это настолько черное, что-то вроде: "Сколько еще черного может быть ?» и ответ таков: «Нет, нет ... еще больше черного». </ blockquote> <ul> <li> <a id="fadeOutAndIn" href="#"> Исчезать и появляться </a> </ li > </ ul> </ body> </ html>

Попробуйте!

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

function init () {$ ('# fadeOutAndIn'). click (function () {$ ('# myText'). fadeOut ('fast'); $ ('# myText'). fadeIn ('slow');} ); }

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

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

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

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

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

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

<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script type = "text / javascript" src = "http://ajax.googleapis.com/ ajax / libs / jquery / 1.4.2 / jquery.min.js "> </ script> <script type =" text / javascript "> $ (init); function init () {$ ('# fadeOutAndIn'). click (function () {$ ('# myText'). fadeOut ('fast', function () {$ ('# myText'). fadeIn ('slow') );});}); } </ script> </ head> <body> <blockquote id = "myText"> Я думаю, что он прав, в этом есть что-то, это ... это настолько черное, что-то вроде: "Сколько еще черного может быть ?» и ответ таков: «Нет, нет ... еще больше черного». </ blockquote> <ul> <li> <a id="fadeOutAndIn" href="#"> Исчезать и появляться </a> </ li > </ ul> </ body> </ html>

Попробуйте!

Метод queue ()

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

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

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

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

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

<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script type = "text / javascript" src = "http://ajax.googleapis.com/ ajax / libs / jquery / 1.4.2 / jquery.min.js "> </ script> <script type =" text / javascript "> $ (init); function init () {$ ('# fadeOutAndIn'). click (function () {$ ('# myText'). fadeOut ('fast'); $ ('# myText'). queue (function () {$ ( this) .fadeIn ('slow'); $ (this) .dequeue ();});}); } </ script> </ head> <body> <blockquote id = "myText"> Я думаю, что он прав, в этом есть что-то, это ... это настолько черное, что-то вроде: "Сколько еще черного может быть ?» и ответ таков: «Нет, нет ... еще больше черного». </ blockquote> <ul> <li> <a id="fadeOutAndIn" href="#"> Исчезать и появляться </a> </ li > </ ul> </ body> </ html>

Попробуйте!

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

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

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

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

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

<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script type = "text / javascript" src = "http://ajax.googleapis.com/ ajax / libs / jquery / 1.4.2 / jquery.min.js "> </ script> <script type =" text / javascript "> $ (init); function init () {$ ('# fadeOutAndIn'). click (function () {$ ('# myText'). fadeOut ('fast') .delay (2000) .fadeIn ('slow');}); } </ script> </ head> <body> <blockquote id = "myText"> Я думаю, что он прав, в этом есть что-то, это ... это настолько черное, что-то вроде: "Сколько еще черного может быть ?» и ответ таков: «Нет, нет ... еще больше черного». </ blockquote> <ul> <li> <a id="fadeOutAndIn" href="#"> Исчезновение и появление (с задержкой) </ a > </ li> </ ul> </ body> </ html>

Попробуйте!

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

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

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

/// Остановить текущую анимацию $ ('# myElement'). Stop ();

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

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

/// Остановить текущую анимацию и очистить очередь будущих анимаций $ ('# myElement'). Stop (true);

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

/// Остановить текущую анимацию, очистить очередь и перейти к концу анимации $ ('# myElement'). Stop (true, true);

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

<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <style type = "text / css"> #myBlock {background: green; ширина: 100 пикселей; высота: 100 пикселей; положение: относительное; } </ style> <script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script> <script type = "text / javascript"> $ (init); function init () {$ ('# start'). click (function () {$ ('# myBlock'). animate ({left: '500px'}, 10000);}); $ ('# stop'). click (function () {$ ('# myBlock'). stop ()}); $ ('# stopAndJump'). click (function () {$ ('# myBlock'). stop (true, true)}); } </ script> </ head> <body> <div id = "myBlock"> </ div> <ul> <li> <a id="start" href="#"> Запустить анимацию </a> < / li> <li> <a id="stop" href="#"> Остановить анимацию </a> </ li> <li> <a id="stopAndJump" href="#"> Остановить анимацию и перейти к конец </a> </ li> </ ul> </ body> </ html>

Попробуйте!

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

Резюме

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

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

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

Готовы?
О настолько черное, что-то вроде: "Сколько еще черного может быть ?
О настолько черное, что-то вроде: "Сколько еще черного может быть ?
О настолько черное, что-то вроде: "Сколько еще черного может быть ?
О настолько черное, что-то вроде: "Сколько еще черного может быть ?
О настолько черное, что-то вроде: "Сколько еще черного может быть ?
О настолько черное, что-то вроде: "Сколько еще черного может быть ?
О настолько черное, что-то вроде: "Сколько еще черного может быть ?