jQuery Animations: 7-шаговая программа

Немного анимации может привести к скучному интерфейсу. В этом уроке вы узнаете, как сделать это правильно с помощью jQuery.

Слово от автора

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

Заинтересованы? Давайте начнем прямо сейчас! Пожалуйста, обратите внимание, что, поскольку это ориентировано на новичка, я мог бы немного перефразировать некоторые части. Потерпите меня. Если вам интересно, ознакомьтесь с первой частью демонстрации , чтобы узнать о простом эффекте, который мы создадим сегодня.

Шаг 1: Основы jQuery

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

Типичная строка кода выглядит так:

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

• $ — Сокращение для объекта jquery. Используйте jquery, если вы используете другой фреймворк на той же странице, как в: jquery (DOM Element) .something ();
• (DOM Element) — Элемент, с которым вы хотите что-то сделать. Это один из тузов JQuery в дыре. Вы можете использовать селекторы CSS для получения элемента. Любое объявление, которое работает в документе CSS, может быть использовано здесь. Идентификаторы, классы, псевдо-классы, что угодно.
• кое-что () — То, что вы хотите сделать с полученным элементом. Это может быть что угодно — от сокрытия элемента до вызова AJAX-обработчика события.

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

Шаг 2: Использование запеченных эффектов

jQuery предоставляет множество встроенных методов, которые вы можете использовать прямо из коробки. Они включают в себя способы отображения / скрытия элементов с несколькими вариациями, включая скольжение элемента и постепенное исчезновение и уменьшение элемента. Вы также можете использовать несколько методов переключения, которые переключают видимость рассматриваемого элемента.

Прежде чем мы рассмотрим каждый из этих методов, вот общий формат для вызова каждого метода:

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

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

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

обратный вызов — это функция, которая выполняется после завершения анимации. Вы можете использовать это, чтобы сделать что-нибудь, сделать AJAX-вызов в фоновом режиме, обновить другую часть пользовательского интерфейса и так далее. Ваше воображение это предел.

Вот список функций, связанных с jQuery:

• show / hide — Методы, чтобы показать или скрыть элемент. Принимает скорость и обратный вызов в качестве параметров.
• toggle — метод, который управляет отображением элемента в зависимости от текущего состояния элемента, т. е. если он скрыт, он отображается и наоборот. Использует методы show или hide.
• slideDown / slideUp — говорит само за себя. Изменяет высоту элемента, чтобы создать скользящую анимацию, чтобы показать или скрыть элемент.
• slideToggle — То же, что метод toggle, за исключением того, что он использует методы slideDown / slideUp для выявления или скрытия элементов.
• fadeIn / fadeOut — изменяет непрозрачность рассматриваемого элемента, чтобы создать эффект затухания.
• fadeTo — изменяет непрозрачность элемента, чтобы соответствовать переданному значению. Очевидно, что требуется дополнительный параметр непрозрачности, где 0 является полностью прозрачным, а 1 — полностью непрозрачным.

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

Например, если вы хотите переключать только те элементы списка, которые имеют класс эффекта , ваш код будет выглядеть так:

Проще говоря, функции переключения проверяют переданное ему выражение, и если оно истинно, оно переключается. Иначе, это оставлено в покое. Переданное здесь выражение проверяет, имеет ли элемент определенный класс.

Шаг 3. Создание пользовательской анимации

Зачастую встроенные методы не совсем соответствуют вашим потребностям, и в этом случае вы определенно захотите создать свои собственные пользовательские эффекты. JQuery позволяет вам сделать это тоже. Довольно легко, на самом деле.

Чтобы создать собственный эффект анимации, вы используете метод animate . Позволь мне показать тебе.

Метод animate похож на любой другой метод в том смысле, что он вызывается таким же образом. Мы получаем элемент, а затем передаем ему некоторые параметры. Параметры — это то, где этот метод отличается от предварительно созданных эффектов.

Параметры скорости и обратного вызова выполняют ту же функцию, что и в предыдущих методах. Свойство объекта, которое содержит несколько пар ключ / значение, делает этот метод уникальным. Вы передаете каждое свойство, которое вы хотите анимировать вместе с окончательным значением. Например, предположим, что вы хотите анимировать элемент до 90% его текущей ширины, вам нужно сделать что-то вроде:

Приведенный выше фрагмент анимирует элемент на 90% его ширины, а затем предупреждает пользователя о том, что он закончил.

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

При определении свойства, которое состоит из более чем одного слова, запишите, чтобы определить его в случае верблюда. Это резко контрастирует с обычным синтаксисом CSS, поэтому обратите особое внимание на это. Это borderTop , а не border-top .

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

Шаг 4: настройка эффекта

Если вы посмотрите на простой эффект в демоверсии, вы могли заметить, что он немного сломан. Многократное включение и выключение элемента приводит к длинной очереди, которая приводит к повторению анимации.

Самый простой способ избежать этой проблемы — использовать метод stop непосредственно перед началом анимации. Это эффективно очищает очередь, и анимация может продолжаться как обычно. Например, это будет ваш обычный код.

Используя stop, чтобы избежать создания анимации, ваш новый код будет выглядеть так:

Довольно просто, нет? Но этот метод имеет небольшую проблему. Быстрое взаимодействие не приведет к наращиванию, а к неполной анимации. Если вы хотите полностью избавиться от этой проблемы, вам придется обратиться к плагину, как hoverFlow .

Шаг 5: добавление немного большего реализма — облегчение

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

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

Существует только предостережение, когда речь идет об использовании настраиваемого эффекта замедления: вы можете использовать его только с настраиваемыми эффектами анимации, то есть с методом animate . Если у вас есть подключаемый модуль замедления, использовать пользовательский метод замедления так же просто, как передать его в качестве параметра, например так:

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

Шаг 6: поднять его на ступеньку выше — пользовательский интерфейс jQuery

Обновление до jQuery UI дает нам ряд очень необходимых функций. На самом деле вам не нужна вся библиотека, чтобы использовать дополнительные функции. Вам просто нужен файл основных эффектов, чтобы получить функциональность. Не ядро ​​пользовательского интерфейса, а просто файл ядра эффектов, который весит примерно 10 килобайт.

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

Если вы помните, я упоминал ранее, что с базовой библиотекой jQuery вы ограничены только свойствами анимации, которые принимают числа. Вы избавились от этого ограничения с помощью jQ UI. Теперь вы можете легко анимировать цвет фона элемента, его границы и так далее. Кроме того, вместо создания отдельной функции для этих расширенных функций, это просто расширяет базовую функцию анимации . Это означает, что если у вас есть основная библиотека, включенная в ваш файл, вы можете использовать обычный метод animate, чтобы сделать всю грязную работу за вас.

Например, если вы хотите анимировать цвет рамки элемента при наведении, ваш код будет выглядеть так:

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

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

Шаг 7: Создание нашего первого эффекта реального мира

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

Представьте себе: вы хотите отобразить изображение, и когда пользовательская мышь над ним, вы отображаете 2 раздела внутри изображения. Один показывает заголовок, а другой показывает крошечное описание изображения. Я уверен, что вы найдете буквально тысячу плагинов, которые делают то же самое, но сегодня мы собираемся создать его с нуля. Обещаю, это не так сложно, как кажется. На самом деле, это довольно просто и может быть очень быстро построено. Давайте начнем.

HTML

Во-первых, нам нужна солидная база разметки, на которой можно основываться

Для этого нам сначала нужно определиться со структурой для каждого элемента. Каждый элемент оборачивается элементом div с классом элемента . Внутри div есть 3 элемента: само изображение и 2 элемента div, содержащих заголовок и описание.

Другие части довольно приземлённы и говорят сами за себя. Мы начнем с включения библиотеки jQuery, библиотеки пользовательского интерфейса jQuery и нашего файла, который содержит наш собственный код JS. Обратите внимание, что мне нужна была только основная часть эффектов jQuery UI, поэтому я скачал только это. Если вам нужны дополнительные встроенные эффекты, вам понадобится пользовательская сборка. Вы можете скачать индивидуальную сборку здесь .

Вот как выглядит наша страница на этом этапе.

CSS

Несколько вещей, которые вам нужно отметить здесь. Каждый элемент item имеет свойство position, установленное на относительное, так что элементы внутри него могут быть легко размещены. Кроме того, его свойство overflow установлено на скрытое, поэтому мы можем скрыть заголовок и описание снаружи, когда они не нужны.

Свойство title и description имеют свойство position, установленное на absolute, чтобы их можно было точно разместить в элементе item. Заголовок имеет верхнее значение 0, поэтому он вверху, а описание имеет нижнее значение, равное 0, поэтому его справа внизу.

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

Вот как выглядит наша страница на этом этапе.

JavaScript-магия с поддержкой jQuery

Это может выглядеть немного внушительно, но это не так. Позвольте мне объяснить каждую часть.

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

Сначала мы перемещаем заголовок и описание вне поля зрения. Мы делаем это с помощью JavaScript, а не с CSS по очень конкретной причине. Даже если JS отключен, он довольно изящно ухудшается. Заголовок и описание по-прежнему накладываются на изображение, и оно выглядит как состояние при наведении. Если бы вместо этого мы использовали CSS для сокрытия заголовка и описания, а если JS отключен, они были бы полностью скрыты и, следовательно, бесполезны. Я решил использовать JS для грязной работы в интересах прогрессивного улучшения.

Мы изначально привязываем наш пользовательский код к функции наведения каждого элемента item. Это позволяет сделать этот обработчик довольно универсальным и многократно используемым. Добавление этой функциональности к другим так же просто, как и присвоение ей класса предметов . Первая функция предназначена для события hover, а вторая — для события unhover .

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

Немного дополнительно, когда контейнеры для заголовка и описания наведены, они медленно меняют цвета, благодаря jQuery UI.

И мы на самом деле сделали. Не так много времени, не так ли? Неплохо для крошечного скрипта, который еще более крошечный, учитывая, сколько строк было выделено исключительно для фигурных скобок.

Вывод

И там у вас есть это. Как создавать анимацию с помощью jQuery вместе с реальным примером использования того, что вы узнали, с пользой. Надеюсь, вы нашли этот урок интересным и полезным. Не стесняйтесь многократно использовать этот код в других местах своих проектов и звоните сюда, если у вас возникнут трудности.

Вопросов? Хорошие вещи, чтобы сказать? Критицизмы? Нажмите на раздел комментариев и оставьте мне комментарий. Удачного кодирования!

• Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке. готов

Написать Плюс Учебник

Знаете ли вы, что вы можете заработать до 600 долларов за написание учебника PLUS и / или скринкаст для нас? Мы ищем подробные и хорошо написанные учебники по HTML, CSS, PHP и JavaScript. Если у вас есть такая возможность, пожалуйста, свяжитесь с Джеффри по адресу [email protected].

Обратите внимание, что фактическая компенсация будет зависеть от качества окончательного урока и скринкаста.