Библиотека jQuery обладает довольно обширным набором методов и позволяет создавать галереи или, скажем, анимацию иллюстрированных спецэффектов — со сложными динамическими элементами. Для этих случаев обычно используются готовые скрипты, которые можно свободно скачать в интернете и установить на сайт.
Подобно тому, как мы используем CMS в качестве движка сайта, а не изобретаем велосипед, вполне логично обращаться к готовым программным решениям. Однако иногда требуется снабдить дизайн выборочными динамическими эффектами, и знание их реализации окажется весьма кстати.
В этой статье я хочу рассказать о своём наборе jQuery-методов, который прижился в реальной практике, на примере одного из сайтов моей работы. Для новичков в jQuery (среди которых, кстати, могут быть профессиональные веб-дизайнеры или программисты) это может упростить понимание общих принципов работы с этой библиотекой. Для владельцев сайтов статья послужит в качестве идейного плацдарма.
В статье рассмотрены методы:
- Анимация объектов (
.animate()) - Динамичная смена CSS-свойств (
.css()) - Динамичная смена содержимого (картинки) (
.attr()) - Действие по таймеру (
setInterval()) - Затухание и появление текста (
.fadeIn()и.fadeOut())
В конце текста вы найдёте небольшую шпаргалку-словарик методов (написан для себя).
Следует уточнить, что в статье сознательно опущены jQuery-методы, связанные с AJAX, так как это, вероятно, тема отдельной записи.
Подключение библиотеки jQuery
Для начала нам потребуется подключить библиотеку jQuery. Для этого можно скачать последнюю версию с официального сайта или использовать CDN, например, от Google. Подключаем скрипт в секцию <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Анимация объекта с определением ширины окна
Метод .animate() (динамичное изменение свойств объекта).
Рассмотрим анимацию выезжающей сбоку области. Сначала нужно определить ширину окна (минус отступ слева в 40 пикселей):
var bod_width = $(window).width() - 40;Затем создаём анимацию для объекта с id="dialogWindow" при щелчке мыши на кнопке «Каталог» с атрибутом id="go":
$("#go").click(function() {
$("#dialogWindow").animate({
width: bod_width + "px",
left: "40px",
opacity: 1,
marginLeft: "0"
}, 250);
});Второй пример анимации: увеличение картинки при наведении курсора.
Принцип аналогичный. Код анимации будет выглядеть так:
.animate({
width: 270 + "px",
opacity: 1,
marginLeft: "-15px",
marginTop: "-15px"
}, 600);Динамичная смена CSS-классов
Методы .removeClass() (удаление класса) и .addClass() (добавление класса).
В CSS-файле задаём классы .price и .price.over (к ним, например, может быть привязана картинка-подложка с белым и красным кругом). Код, обрабатывающий наведение курсора:
$('.price').hover(
function() {
// При наведении курсора добавляем класс 'over'
$(this).addClass('over');
},
function() {
// При уходе курсора удаляем класс 'over'
$(this).removeClass('over');
}
);Таким образом, при наведении указателя мыши на цену выделяется возможность «Купить сейчас». Если курсор уйдёт в сторону, ценник снова отобразится неактивным.
Смена содержимого через общий родительский элемент
Метод .attr() (получение/установка атрибута) в сочетании с методами .parents() (поиск родителя) и .find() (поиск внутри элемента).
Примерная структура в документе:
<div class="catalog_item_photos">
<a href="big_image.jpg" class="flink">
<img src="small_image.jpg" alt="">
</a>
<div class="catalog_item_photos_big">
<img src="big_image.jpg" alt="">
</div>
</div>Объединяющим является блок с классом .catalog_item_photos. Таких контейнеров на странице несколько. Мы обращаемся к дочерним элементам того из них, по миниатюре которого щёлкнули мышкой. Для этого используется конструкция $(this).parents('.catalog_item_photos').
$('.catalog_item_photos a.flink').click(function(event) {
event.preventDefault(); // Отменяем стандартное действие ссылки
// Находим родительский контейнер и внутри него — блок для большой картинки
$(this).parents('.catalog_item_photos')
.find('.catalog_item_photos_big img')
.attr('src', $(this).attr('href')); // Меняем src большой картинки на href ссылки
});Действие по таймеру и эффекты затухания/появления текста
Методы setInterval() (установка интервала), .text() (установка текста), .fadeIn() (плавное появление) и .fadeOut() (плавное исчезновение).
Упрощённый внешний вид блока в документе:
<div id="news_block">
НОВОСТИ:
<div id="message_top">Вниманию пользователей сайта www.westskate.ru</div>
</div>Создаём функцию, основанную на массиве строк, которые будут сменяться по таймеру внутри элемента с id="message_top".
var mess_tab = ["Сообщение 1", "Сообщение 2", "Сообщение 3", "Сообщение 4", "Сообщение 5"];
var next = 0;
function slidingSwitch() {
if (next == 4) {
next = 0;
} else {
next = next + 1;
}
$("#message_top").fadeOut(700, function() {
$(this).text(mess_tab[next]).fadeIn(700);
});
}
// Запускаем смену сообщений каждые 8 секунд
$(function() {
setInterval(slidingSwitch, 8000);
});Приложение. Краткий словарик-шпаргалка по jQuery-методам
.add()— Добавление элементов к группе выбранных элементов.
Пример:$("p").add("div").addClass("widget");.addClass()— Добавление заданного CSS-класса..after()— Вставка контента после указанного элемента..animate()— Анимация изменения CSS-свойств элемента..attr()— Получение или установка значения атрибута элемента..click()— Обработчик события щелчка мышью..css()— Получение или установка CSS-свойства..fadeIn()— Плавное появление элемента..fadeOut()— Плавное исчезновение элемента..find()— Поиск дочерних элементов, соответствующих селектору..height()— Получение или установка высоты элемента..hide()— Мгновенное скрытие элемента..hover()— Обработчик событий наведения и ухода курсора..parents()— Поиск родительских элементов..removeClass()— Удаление CSS-класса..text()— Получение или установка текстового содержимого..toggleClass()— Переключение (добавление/удаление) CSS-класса..val()— Получение или установка значения формы..width()— Получение или установка ширины элемента.
