JQuery – набор функций JavaScript, используемый для взаимодействия с HTML. Представляет собой библиотеку, предоставляющую доступ к любому элементу DOM, позволяя не только легко обращаться к атрибутам и содержимому элементов DOM, но и управлять ими. Разработка данной библиотеки ведется командой добровольцев. Она поддерживает удобный API для работы с AJAX.
JQuery часто встречается на практике за счет методов, позволяющих создавать анимацию для процессов на страницах веб-сайтов. Далее предстоит разобраться с самыми популярными из них. Все рассматриваемые далее методы позволяют создавать и настраивать анимационные эффекты в программном коде.
Несколько слов об анимации
Анимация – это базовая функциональность интерактивных элементов веб-дизайна. Внешний вид сайта играет важную роль в привлечении посетителей на постоянной основе. Интерактивность (анимационные эффекты) привлекает больше внимания клиентов в сравнении со «стандартным» дизайном.
Создавать анимацию без JavaScript можно. Пример – через реализации CSS3. Для создания анимации для элементов веб-сайта через HTML5 и CSS3 придется постараться. Можно ускорить соответствующий процесс за счет методов фреймворка JQuery.
Наиболее распространенной задачей при создании веб-сайтов является изменение видимости элемента. Можно скрыть/отобразить компонент через атрибуты CSS display или visibility. JQuery упрощает задачу. Этот фреймворк поддерживает всего две функции – hide и show.
Приведенный выше пример при обработке отобразит и мгновенно уберет элемент. На практике он почти не используется. Чаще всего для animations на сайте используются:
- Растворение – реализовывает процесс постепенного удаления элемента HTML. Достигается результат за счет корректирования свойства opacity.
- Скольжение – реализует постепенное расширение или сжатие элемента HTML. Для этого необходимо изменять высоту компонента.
Далее предстоит рассмотреть данные эффекты более подробно. JQuery инкапсулирует сложности анимации, предоставляя встроенные методы для решения наиболее распространенных задач веб-дизайна.
Простое сокрытие
Анимации появления компонентов на веб-странице могут быть разными. Первый вариант – это простое сокрытие. Для этого используется метод hide. Он устанавливает в стилях блока значение «display: none». Вот пример, в котором скрывается любой div блок при клике по нему:
Чтобы показать спрятанный блок, необходимо использовать метод show. Если элемент веб-страницы имеет свойство «display: none», потребуется добавить кнопку показа скрытых компонентов. Предыдущий пример с animation будет выглядеть так:
Методы hide и show имеют один параметр. В него допускается передача миллисекунд (1 000 миллисекунд – это 1 секунда), за которое происходит скрытие и показ элемента. Вот так выглядит код с задержкой 1 000, а также закрытием в 2 000:
Здесь для удобства добавлены рамки элементов (строк). Они необходимы для наглядной демонстрации принципов работы «закрытия».
Иногда требуется изменить состояние с «показан» на «спрятан», не выясняя текущее состояние элемента. Для этого используется метод .toggle(). Если элемент скрыт, сработает анимация появления (словно применен метод show). Обратный принцип действия тоже поддерживается.
Скольжение
При использовании hiding и shown (методов hide и show соответственно) animated объект уменьшает ширину и высоту блоков до тех пор, пока не исчезнет. При отсутствии параметров эти операции осуществляются так, что никакой анимации не заметно. Для пользователя компонент просто исчезнет. Если требуется анимация свертывания вверх, в JQuery используются совершенно другие методы:
- slideUP – отвечает за анимацию сокрытия;
- slideDown – анимация появления (showing animate).
Вот так выглядит наглядный пример кода:
SlideDown показывает компонент, раскатывая сверху. Такой результат достигается за счет увеличения высоты блока. SlideUp скрывает его, закатывая наверх. Происходит уменьшение высоты до тех пор, пока в CSS не появится свойство элемента «display: none».
Если необходимо изменить состояние с hidden animate на showing или наоборот без изучения текущего положения компонента, используется .slideToggle(). Он работает аналогично .toggle: если блок спрятан – он будет показан, а если открыт – скрыт.
У рассмотренных методов есть параметр продолжительности. Он принимает значения slow или fast. Первый вариант – медленная работа, второй – быстрая анимация.
Растворение
Растворение достигается за счет изменения прозрачности. В CSS соответствующий параметр называется opacity. Здесь необходимо запомнить следующее:
- для hides animates (скрытие) используется fadeOut;
- для появления (showing) применяется fadeIn.
Если задать этим методам параметры в виде числа – они выступят задержкой в миллисекундах на исполнение применяемых процедур. Вот наглядный пример кода:
FadeOut уменьшает прозрачность, приводя к появлению showing animate. FadeIn увеличивает параметр прозрачности. Это приводит к тому, что блок на веб-страничке постепенно исчезает.
Иногда требуется изменить состояние компонента на экране, не рассматривая его текущее «положение». Для этого используется .fadeToggle(). Соответствующая команда показывает блок, если он был скрыт (словно использовалась «инструкция» fadeout), а также скрывает – когда он отображался (подобно fadeIn).
Собственные эффекты
В JQuery допускается создание «особых» анимационных эффектов. Данная операция реализовывается через animate-method. Он встречается в исходном коде тогда, когда возникает необходимость ни в сокрытии и показе блока, а в создании других эффектов.
Animate имеет несколько параметров:
- в первом происходит передача CSS-набора свойств, которыми в конце должен обладать компонент;
- во втором параметре задается время преобразования (в миллисекундах).
Ниже – пример изменения размеров произвольно заданного прямоугольника. Согласно первоначальной задачи, требуется сделать из него квадрат высотой и шириной 100 пикселей:
На экране появится следующий результат:
В первом параметре допускается использование не только CSS-свойств тех или иных значений. Можно поставить height:=’+=20’. В этом случае высота компонента увеличится на 20 пикселей относительно текущей.
Выше – наглядный пример кода. Он позволит увеличить размер ширины фигуры на 10 пикселей, а высоты – на 20. Происходит это при клике по специально созданной кнопке. Она называется «Увеличить размер».
Далее будут рассмотрены примеры «нестандартных» анимационных эффектов на веб-странице.
По частям
JQuery допускает отображение изображения, применяя animation к отдельным его частям. Сначала «картинка» делится на несколько маленьких.
Данное изображение необходимо поделить на 12 частей размером 150 на 150 пикселей. Они размещаются в 2 ряда по 6 штук. Все изображения каждого ряда располагаются в правом углу страницы:
Код позиционирования выглядит так:
Предложенный пример указывает на то, что все изображения в каждом ряду скрываются и располагаются поверх друг друга, применяя абсолютное позиционирование. Если преобразовать его в JQuery, получится такой фрагмент:
Здесь:
- Заданы два селектора для отбора компонентов классов img_item и img_item2.
- Применяется функция animate к отдельным частям для плавного изменения значения свойства opacity на 1, а left изменяется относительно положения предыдущего фрагмента картинки.
- Анимационные эффекты будут одновременно применяться ко всем частям изображения.
Выше – пример того, что произойдет при обработке заданного кода.
Цепочки
Эффектов, применяемых для компонентов веб-сайта, может быть несколько. В более сложных задачах они соединяются в цепочки:
Цепочки создаются путем вызова animate несколько раз через точечную нотацию.
Интересует JavaScript? Добро пожаловать на курс в Otus!
