Статья

Foops Сегодня 12:59

Анимации на сайте с jQuery без плагинов

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

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

Зачем вообще нужны анимации

Анимация помогает оживить сайт. Вот несколько причин, почему это удобно:

Подсказки для пользователя. Когда что-то меняется плавно, это понятно глазу. Например, кнопка стала зелёной при наведении.
Фокус внимания. Всплывающее окно с формой регистрации лучше заметно, если оно появляется плавно, а не резко.
Чисто эстетика. Даже мелкие эффекты вроде fadeIn делают интерфейс приятнее.
Навигация. Анимация прокрутки к нужному блоку помогает понять, где ты находишься.

Но перебарщивать не стоит. Если всё мигает и двигается, сайт утомляет.

Что умеет jQuery из коробки

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

.show(), .hide(), .toggle()
.fadeIn(), .fadeOut(), .fadeToggle()
.slideDown(), .slideUp(), .slideToggle()
.animate() — для кастомных анимаций

Этих методов хватает, чтобы сделать 80% эффектов на сайте.

Подключение jQuery

Для начала нужен сам jQuery. Подключить можно через CDN:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Теперь можно писать код. Лучше класть скрипт внизу страницы или оборачивать его в $(document).ready(), чтобы он запускался только после загрузки DOM:

$(document).ready(function() {
  // тут наш код
});

Простое появление и скрытие

`.show()` и `.hide()`

<button id="hide">Скрыть</button>
<button id="show">Показать</button>
<div id="box" style="width:200px; height:100px; background:red; margin-top:10px;"></div>

$(document).ready(function(){
  $("#hide").click(function(){
    $("#box").hide();
  });
  $("#show").click(function(){
    $("#box").show();
  });
});

Элемент просто исчезает или появляется.

С анимацией

Методы .show() и .hide() принимают параметр speed. Он может быть числом в миллисекундах или словами "slow", "fast".

$("#box").hide(1000); // скроется за 1 секунду
$("#box").show("slow"); // плавное появление

Плавное проявление

`.fadeIn()` и `.fadeOut()`

<button id="fadeout">Исчезни</button>
<button id="fadein">Появись</button>
<div id="block" style="width:150px;height:100px;background:blue;margin-top:10px;"></div>

$(document).ready(function(){
  $("#fadeout").click(function(){
    $("#block").fadeOut(1000);
  });
  $("#fadein").click(function(){
    $("#block").fadeIn(1000);
  });
});

Разница в том, что здесь меняется прозрачность (opacity).

Переключатель

$("#block").fadeToggle(800);

При каждом клике элемент будет то появляться, то исчезать.

Сдвиги

`.slideDown()` и `.slideUp()`

Часто применяют для меню или аккордеонов.

<button id="menuBtn">Меню</button>
<ul id="menu" style="display:none; background:#eee; padding:10px;">
  <li>Главная</li>
  <li>О нас</li>
  <li>Контакты</li>
</ul>

$(document).ready(function(){
  $("#menuBtn").click(function(){
    $("#menu").slideToggle(500);
  });
});

Меню плавно открывается и закрывается.

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

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

Синтаксис:

$(selector).animate({ свойства }, скорость, функция);

Пример:

$("#box").animate({
  left: '250px',
  opacity: '0.5',
  height: '150px',
  width: '150px'
}, 1000);

Тут за 1 секунду элемент переместится вправо, уменьшится и станет полупрозрачным.

Очередь анимаций

Можно ставить эффекты друг за другом:

$("#box").animate({height: "300px"}, 500)
         .animate({width: "300px"}, 500)
         .animate({opacity: 0.3}, 500);

jQuery выполнит их по очереди.

Остановка

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

$("#box").stop().slideToggle(500);

Колбэки

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

$("#box").fadeOut(1000, function(){
  alert("Элемент исчез");
});

Практические сценарии

1. Аккордеон для текста

<h3 class="title">Заголовок 1</h3>
<div class="content">Текст блока 1</div>

<h3 class="title">Заголовок 2</h3>
<div class="content">Текст блока 2</div>

$(".content").hide();
$(".title").click(function(){
  $(this).next(".content").slideToggle(500);
});

2. Плавная прокрутка к блоку

<a href="#about">О нас</a>

<div id="about" style="margin-top:1000px;">Контент о нас</div>

$("a[href^='#']").click(function(e){
  e.preventDefault();
  let target = $($(this).attr("href"));
  $("html, body").animate({
    scrollTop: target.offset().top
  }, 800);
});

3. Подсветка кнопки при наведении

<button class="hoverBtn">Кнопка</button>

$(".hoverBtn").hover(
  function(){
    $(this).animate({backgroundColor: "#ff0000"}, 300);
  },
  function(){
    $(this).animate({backgroundColor: "#008000"}, 300);
  }
);

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

4. Слайд-шоу

<div id="slider">
  <img src="img1.jpg" style="display:block;">
  <img src="img2.jpg" style="display:none;">
  <img src="img3.jpg" style="display:none;">
</div>

let i = 0;
let images = $("#slider img");

setInterval(function(){
  $(images[i]).fadeOut(1000, function(){
    i = (i + 1) % images.length;
    $(images[i]).fadeIn(1000);
  });
}, 3000);

Ограничения

jQuery не умеет сложные 3D-эффекты.
Цвета и трансформации (rotate, scale) — лучше делать на CSS.
На очень больших проектах много jQuery-анимаций может тормозить.

Когда лучше CSS, а когда jQuery

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

Итог

jQuery до сих пор остаётся удобным инструментом для анимации без плагинов.

С помощью .fadeIn, .slideDown, .animate и пары десятков строк кода можно сделать всплывающие окна, аккордеоны, плавную прокрутку, слайдеры.

Главное правило — использовать анимации в меру и там, где они помогают пользователю.

Разработка Jquery

+ Читать