Карта сайта

Урок 5: Эффекты и анимация в jQuery

/Уроки по JQuery/Урок 5: Эффекты и анимация в jQuery
Урок 5: Эффекты и анимация в jQuery
Автор: написал в рубрике Уроки по JQuery. 0 Комментариев.

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

На 5-ом уроке мы изучим тему эффектов и анимации в jQuery. Мы научимся управлять видимостью элементов с помощью базовых методов, создавать изящные плавные переходы и даже конструировать собственные, уникальные анимации. А в качестве практического задания соберем популярный и полезный UI-компонент, это аккордеон для раздела часто задаваемых вопросов (FAQ). Готовы добавить своим проектам динамики и интерактивности? Тогда начнем.

Базовые эффекты: .show(), .hide(), .toggle()

Давайте начнем с самого простого, с управления видимостью элементов на странице. Часто бывает нужно скрыть какой-то блок, а потом, по нажатию кнопки, показать его. Именно для этих целей в jQuery есть три простых, но невероятно полезных метода: .show(), .hide() и .toggle().

Метод .hide() делает выбранный элемент невидимым. Важно понимать, что он не просто устанавливает CSS-свойство visibility: hidden, которое оставляет за элементом место на странице, а применяет display: none, что полностью убирает элемент из потока документа. Аналогично, метод .show() восстанавливает видимость элемента, устанавливая для него значение свойства display, которое было у него по умолчанию (например, block, inline и т.д.). Самое приятное, что эти методы могут работать не только как мгновенные переключатели, но и как плавные анимации. Если передать им в качестве аргумента длительность анимации (в миллисекундах или строковых значениях "slow" и "fast"), jQuery плавно изменит прозрачность (opacity) и размеры элемента, создавая эффект исчезновения или появления.

А теперь давайте познакомимся с настоящим тружеником, с методом .toggle(). Он анализирует текущее состояние элемента: если он видим, .toggle() скроет его, а если скрыт, то покажет. Это избавляет нас от необходимости писать громоздкие условные конструкции для проверки видимости элемента. Представьте себе кнопку «Подробнее», которая должна показывать и скрывать дополнительный текст. С .toggle() это реализуется одной строкой кода! Это не только удобно, но и помогает поддерживать код в чистоте и порядке.

Давайте посмотрим на этих «трех мушкетеров» в действии. Представьте, что у вас есть простой абзац и три кнопки.

html
<p id="myParagraph">Привет, я магический абзац! Я могу появляться и исчезать!</p>
<button id="btnHide">Скрыть</button>
<button id="btnShow">Показать</button>
<button id="btnToggle">Переключить</button>

Наша задача «оживить» эти кнопки.

javascript
$(document).ready(function() {
    // Мгновенное скрытие
    $('#btnHide').click(function() {
        $('#myParagraph').hide();
    });

    // Мгновенное появление
    $('#btnShow').click(function() {
        $('#myParagraph').show();
    });

    // Переключение видимости с анимацией за 600 мс
    $('#btnToggle').click(function() {
        $('#myParagraph').toggle(600);
    });
});

Как видите, для кнопки «Переключить» мы указали время анимации 600 миллисекунд. Теперь абзац будет плавно «схлопываться» и «разворачиваться», а не просто мгновенно пропадать и появляться. Поэкспериментируйте со значениями "slow" (600 мс) и "fast" (200 мс), чтобы почувствовать разницу.

Практическая задача 1: Создайте на своей тестовой странице три кнопки и блок с текстом. Реализуйте функционал:

  • Кнопка «Скрыть» должна мгновенно убирать блок.

  • Кнопка «Показать» должна мгновенно возвращать блок.

  • Кнопка «Плавное Переключение» должна плавно скрывать и показывать блок с длительностью анимации в 400 миллисекунд.

Плавные анимации: .fadeIn(), .fadeOut(), .slideDown(), .slideUp()

Базовые методы .show() и .hide() хороши, но их анимация (изменение прозрачности и размеров одновременно) не всегда подходит под дизайнерскую задумку. Часто нам нужны более специализированные и элегантные эффекты. Для этого jQuery предлагает две пары замечательных методов: для работы с прозрачностью и для работы с высотой.

Давайте начнем с эффектов прозрачности. Методы .fadeOut() и .fadeIn() работают исключительно с opacity элемента. .fadeOut() плавно уменьшает непрозрачность элемента до нуля, а затем, когда анимация завершена, применяет display: none, чтобы окончательно убрать его из потока. Его напарник, .fadeIn(), наоборот, начинает с display: none и нулевой прозрачности, а затем плавно увеличивает opacity до 1. Эти эффекты создают ощущение мягкого появления и исчезновения, словно элемент растворяется в воздухе. Они отлично подходят для всплывающих уведомлений, тултипов и модальных окон.

Следующая пара методов, это .slideUp() и .slideDown(). Они работают с высотой элемента. .slideUp() плавно «схлопывает» элемент, уменьшая его высоту до нуля, после чего применяет display: none. .slideDown(), как вы уже догадались, проделывает обратную операцию: он плавно «разворачивает» элемент из верхней границы до его исходной высоты. Эти анимации создают четкое ощущение того, что элемент «выезжает» или «заезжает» обратно. Они идеальны для раскрывающихся меню, аккордеонов (о котором мы поговорим в практике) и вообще любых блоков, содержимое которого может быть скрыто.

Как и в случае с .toggle() для видимости, у fade и slide также есть свои переключатели! Это методы .fadeToggle() и .slideToggle(). Они действуют по тому же умному принципу: анализируют текущее состояние и либо показывают, либо скрывают элемент с помощью соответствующего эффекта. Использование этих переключателей делает код лаконичным и читаемым.

Давайте проиллюстрируем это на примере. Создадим блок, который будет исчезать и появляться с разными эффектами.

html
<div id="fadeBlock" style="width: 200px; height: 100px; background-color: lightblue; margin-bottom: 10px;"></div>
<button id="btnFadeOut">Fade Out</button>
<button id="btnFadeIn">Fade In</button>
<button id="btnFadeToggle">Fade Toggle</button>

<div id="slideBlock" style="width: 200px; height: 100px; background-color: lightcoral; margin-bottom: 10px; overflow: hidden;"></div>
<button id="btnSlideUp">Slide Up</button>
<button id="btnSlideDown">Slide Down</button>
<button id="btnSlideToggle">Slide Toggle</button>

Обратите внимание на overflow: hidden для sliding-блока. Это важный момент! Если содержимое блока будет выпадать за его границы при уменьшении высоты, это может испортить весь эффект. overflow: hidden гарантирует, что содержимое будет аккуратно скрываться вместе с самим блоком.

javascript
$(document).ready(function() {
    // Fading Effects
    $('#btnFadeOut').click(function() {
        $('#fadeBlock').fadeOut(1000); // Исчезает за 1 секунду
    });
    $('#btnFadeIn').click(function() {
        $('#fadeBlock').fadeIn(1000); // Появляется за 1 секунду
    });
    $('#btnFadeToggle').click(function() {
        $('#fadeBlock').fadeToggle(500); // Переключается за 0.5 секунды
    });

    // Sliding Effects
    $('#btnSlideUp').click(function() {
        $('#slideBlock').slideUp(1000);
    });
    $('#btnSlideDown').click(function() {
        $('#slideBlock').slideDown(1000);
    });
    $('#btnSlideToggle').click(function() {
        $('#slideBlock').slideToggle(500);
    });
});

Практическая задача 2: Создайте уведомление в верхней части страницы (<div class="alert">Важное сообщение!</div>). Реализуйте следующее:

  1. При загрузке страницы уведомление должно плавно появиться с помощью .fadeIn() за 1 секунду.

  2. При клике на само уведомление оно должно с помощью .slideUp() за 0.8 секунды скрыться, а затем быть полностью удалено из DOM с помощью .remove() (подсказка: используйте callback-функцию в методе .slideUp()).

Универсальный метод .animate() для создания кастомной анимации

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

Синтаксис этого метода выглядит следующим образом:
$(селектор).animate( свойства [, длительность ] [, easing ] [, callback ] );

  • Свойства. Это объект, в котором мы указываем, какие CSS-свойства мы хотим анимировать и к какому конечному значению. Ключевой момент: вы можете анимировать только свойства, значения которых являются числами (например, left, marginLeft, opacity, height, width). Нельзя анимировать цвета с помощью базового .animate(), но для этого есть дополнительные плагины.

  • Длительность. Так же, как и в предыдущих методах, это время анимации в миллисекундах или строковые константы.

  • Easing Определяет функцию смягчения, которая описывает, как скорость анимации меняется в течение времени. По умолчанию в jQuery используется swing, который обеспечивает более естественное начало и конец и linear, где анимация идет с постоянной скоростью.

  • Callback Функция, которая будет выполнена сразу после завершения анимации. Это крайне полезно для создания цепочек действий.

Давайте рассмотрим несколько примеров, чтобы прочувствовать всю мощь этого метода.

Пример 1: Движение и изменение размера

html
<div id="box" style="width: 100px; height: 100px; background-color: green; position: relative;"></div>
<button id="animateBtn">Анимировать!</button>
javascript
$('#animateBtn').click(function() {
    $('#box').animate({
        left: '300px',       // Сдвигаем вправо на 300px
        opacity: 0.5,        // Делаем полупрозрачным
        width: '300px',      // Увеличиваем ширину
        height: '300px'      // Увеличиваем высоту
    }, 2000); // Вся анимация длится 2 секунды
});

Обратите внимание, что для работы со свойством left (или top, right, bottom), элемент должен иметь CSS-свойство position, отличное от static (например, relative, absolute или fixed).

Пример 2: Цепочка анимаций

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

javascript
$('#box').animate({ left: '300px' }, 1000)
         .animate({ top: '300px' }, 1000)
         .animate({ left: '0px' }, 1000)
         .animate({ top: '0px' }, 1000, function() {
             $(this).css('background-color', 'red'); // Меняем цвет после завершения всей цепочки
         });

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

Пример 3: Относительные значения

Вы можете изменять свойства не на абсолютные величины, а относительно текущих. Для этого используйте операторы += и -=.

javascript
$('#box').animate({
    width: '+=50px', // Увеличить ширину на 50 пикселей от текущей
    height: '-=20px' // Уменьшить высоту на 20 пикселей от текущей
}, 500);

Практическая задача 3: Создайте элемент (<div>) в виде небольшого круга (используйте border-radius: 50%).

  1. С помощью метода .animate() заставьте этот шар покатиться от левого края окна к правому, одновременно меняя его фон со светлого на темный оттенок (подсказка: для анимации цвета вам понадобится подключить дополнительный плагин jquery-ui.js или использовать CSS-переходы отдельно, но для простоты можно просто анимировать left и width/height).

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

Делаем аккордеон (складывающийся блок) для FAQ-раздела

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

Наша цель:

  • Создать разметку для нескольких пунктов аккордеона.

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

  • Сделать так, чтобы при открытии одной секции другие автоматически скрывались.

Шаг 1: Подготовка HTML-разметки

Разметка будет очень простой и семантичной. Каждый пункт аккордеона это блок .accordion-item. Внутри него заголовок .accordion-header и скрытое содержимое .accordion-content.

html
<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">Что такое jQuery?</div>
        <div class="accordion-content">
            <p>jQuery это быстрая, небольшая и многофункциональная библиотека JavaScript. Она упрощает такие вещи, как обход и манипуляции HTML-документом, обработка событий, анимация и Ajax, благодаря простому в использовании API, работающему в множестве браузеров.</p>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Почему jQuery до сих пор популярен?</div>
        <div class="accordion-content">
            <p>Несмотря на рост популярности современных фреймворков, jQuery остается отличным выбором для небольших проектов, для добавления простой интерактивности на сайты, а также поддерживает огромное количество legacy-кода в интернете.</p>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Как подключить jQuery?</div>
        <div class="accordion-content">
            <p>Есть два основных способа: загрузить библиотеку на свой сервер и подключить локально, либо использовать CDN (сеть доставки контента), например, от Google или Microsoft.</p>
        </div>
    </div>
</div>

Шаг 2: Добавление базовых стилей (CSS)

Чтобы наш аккордеон выглядел прилично, добавим немного стилей. Мы сразу скроем содержимое секций.

css
.accordion {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.accordion-item {
    border-bottom: 1px solid #ddd;
}
.accordion-item:last-child {
    border-bottom: none;
}
.accordion-header {
    padding: 15px 20px;
    background-color: #f5f5f5;
    cursor: pointer; /* Меняем курсор на "руку" */
    font-weight: bold;
    transition: background-color 0.2s; /* Плавное изменение фона */
}
.accordion-header:hover {
    background-color: #e9e9e9;
}
.accordion-content {
    padding: 0 20px;
    background-color: #fff;
    display: none; /* Изначально скрываем содержимое */
    overflow: hidden; /* Важно для плавной анимации высоты */
}
.accordion-content p {
    padding: 15px 0;
}

Шаг 3: Написание jQuery-логики

Это самая интересная часть. Нам нужно:

  1. Найти все заголовки аккордеона и повесить на них обработчик клика.

  2. По клику найти следующий за заголовком блок с контентом (.accordion-content).

  3. Закрыть все открытые в данный момент блоки контента во всем аккордеоне, кроме того, на заголовок которого мы кликнули.

  4. Открыть/закрыть (переключить) блок контента, связанный с кликнутым заголовком.

Мы будем использовать метод .slideToggle() для плавного разворачивания и скрытия контента и метод .slideUp() для принудительного закрытия всех остальных секций.

javascript
$(document).ready(function() {
    // Находим все заголовки аккордеона
    $('.accordion-header').click(function() {
        // Сохраняем ссылку на текущий заголовок и его контент
        var $header = $(this);
        var $content = $header.next('.accordion-content');

        // Закрываем ВСЕ открытые блоки контента, кроме текущего
        $('.accordion-content').not($content).slideUp(400);

        // Переключаем (открываем/закрываем) текущий блок контента
        $content.slideToggle(400, function() {
            // Опционально: можно добавить класс активности для заголовка
            // Убираем класс у всех заголовков
            $('.accordion-header').removeClass('active');
            // Если контент открыт после анимации, добавляем класс активному заголовку
            if ($content.is(':visible')) {
                $header.addClass('active');
            }
        });
    });
});

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

css
.accordion-header.active {
    background-color: #d4edda; /* Светло-зеленый фон */
    border-left: 4px solid #28a745; /* Зеленая полоска слева */
}

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

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

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

В следующем уроке мы перейдем к еще более креативной части, это манипуляциям с DOM: мы научимся создавать, добавлять, клонировать и удалять элементы прямо на лету с помощью jQuery. Это откроет нам дверь к созданию по-настоящему динамических интерфейсов. До встречи.

Полный курс с уроками по jQuery для начинающих

 

Поделиться статьей:
Поддержать автора блога

Поддержка автора осуществляется с помощью специальной формы ниже, предоставленной сервисом «ЮMoney». Все платёжные операции выполняются на защищённой странице сервиса, что обеспечивает их корректность и полную безопасность.

Персональные рекомендации
Оставить комментарий