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

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

Фишка в том, что jQuery умеет анимировать почти всё сам — без CSS и без плагинов. Главное знать, как.

---

1. С чего начать

Подключи jQuery в HTML. Можно с CDN:

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

Теперь можно писать:

<script>
$(function() {
  console.log("jQuery готов!");
});
</script>

---

2. Простая анимация: fadeIn() и fadeOut()

Это самые базовые эффекты — плавное появление и исчезновение.

HTML:

<button id="show">Показать</button>
<button id="hide">Скрыть</button>
<div id="box" style="width:200px;height:200px;background:#4CAF50;display:none;"></div>

JS:

$('#show').click(function() {
  $('#box').fadeIn(1000);
});

$('#hide').click(function() {
  $('#box').fadeOut(1000);
});

⏱ Аргумент 1000 — время в миллисекундах (1 секунда).

---

3. fadeToggle() — переключатель

Чтобы не писать два раза, можно просто:

$('#show').click(function() {
  $('#box').fadeToggle(1000);
});

Каждый клик — появление или исчезновение блока.

---

4. Плавное изменение прозрачности: fadeTo()

Иногда нужно не спрятать, а сделать полупрозрачным:

$('#box').fadeTo(1000, 0.3); // за секунду станет 30% прозрачным

---

5. Скрытие сдвигом: slideUp() и slideDown()

Эффект как в аккордеонах и меню.

<button id="toggle">Показать/Скрыть</button>
<div id="panel" style="width:200px;background:#2196F3;padding:10px;color:#fff;">
  Привет, я панель!
</div>

$('#toggle').click(function() {
  $('#panel').slideToggle(400);
});

---

6. Собственная анимация: animate()

Самое интересное — можно анимировать любые числовые CSS-свойства: ширину, высоту, позицию, прозрачность.

<button id="go">Двигай!</button>
<div id="block" style="width:50px;height:50px;background:red;position:relative;"></div>

$('#go').click(function() {
  $('#block').animate({
    left: '250px',
    opacity: 0.5,
    width: '100px',
    height: '100px'
  }, 1000);
});

📍 jQuery сам вычислит промежуточные значения и создаст плавное движение.

---

7. Комбинированная анимация

Можно вызывать несколько анимаций подряд:

$('#block').animate({left: '200px'}, 500)
           .animate({top: '100px'}, 500)
           .animate({opacity: 0.3}, 500);

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

---

8. Остановка анимации

Если нужно прервать движение (например, при повторных кликах):

$('#block').stop();

Можно добавить true, true, чтобы сбросить очередь и дойти до конца сразу:

$('#block').stop(true, true);

---

9. Колбэки (что делать после анимации)

Анимация — асинхронная, то есть она выполняется не сразу.

Чтобы что-то сделать после неё:

$('#box').fadeOut(1000, function() {
  alert('Готово!');
});

---

10. Цепочки действий

jQuery позволяет вызывать методы подряд:

$('#box').fadeOut(400).fadeIn(400).slideUp(400).slideDown(400);

Эффекты выполняются один за другим, без лишнего кода.

---

11. Анимация меню

Пример простого выпадающего меню:

<ul id="menu">
  <li>Главная</li>
  <li>О нас</li>
  <li id="services">Услуги
    <ul style="display:none;">
      <li>Сайт</li>
      <li>SEO</li>
      <li>Реклама</li>
    </ul>
  </li>
</ul>

$('#services').hover(
  function() { $(this).find('ul').slideDown(300); },
  function() { $(this).find('ul').slideUp(300); }
);

---

12. Анимация скролла страницы

Можно плавно пролистать вниз к нужному блоку:

<a href="#about">О компании ↓</a>
<section id="about" style="margin-top:1000px;">Инфо</section>

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

---

13. Плавное появление элементов при скролле

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

$(window).on('scroll', function() {
  $('.fade-in').each(function() {
    var top = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll + windowHeight > top + 100) {
      $(this).animate({opacity: 1, top: 0}, 600);
    }
  });
});

HTML:

<div class="fade-in" style="opacity:0;position:relative;top:50px;">Контент</div>

---

14. Мягкое появление контента после загрузки

$(window).on('load', function() {
  $('body').fadeIn(1000);
});

Изначально в CSS можно поставить:

body { display: none; }

---

15. Анимация кнопки при наведении

<button id="btn">Наведи на меня</button>

$('#btn').hover(
  function() {
    $(this).animate({width: '150px'}, 200);
  },
  function() {
    $(this).animate({width: '100px'}, 200);
  }
);

---

16. Цикличная анимация

Можно повторять эффект, например мигание:

function blink() {
  $('#box').fadeOut(400).fadeIn(400, blink);
}
blink();

---

17. Случайное движение

setInterval(function() {
  $('#block').animate({
    left: Math.random() * 300 + 'px',
    top: Math.random() * 200 + 'px'
  }, 800);
}, 1000);

Так можно сделать, например, «плавающие» элементы на фоне.

---

18. Эффект появления карточек

Часто используют для галерей:

$('.card').each(function(i) {
  $(this).delay(i * 200).fadeIn(400);
});

Каждая карточка появится чуть позже предыдущей.

---

19. Прелоадер (анимация загрузки сайта)

<div id="preloader" style="background:#000;color:#fff;position:fixed;width:100%;height:100%;display:flex;align-items:center;justify-content:center;">Загрузка...</div>

$(window).on('load', function() {
  $('#preloader').fadeOut(800);
});

---

20. Комбинирование CSS и jQuery

Иногда логичнее задать анимацию в CSS, а запуск — через jQuery:

.fade {
  opacity: 0;
  transition: opacity 1s;
}
.fade.show {
  opacity: 1;
}

$('#btn').click(function() {
  $('.fade').addClass('show');
});

Так меньше нагрузки и всё плавно работает даже без JavaScript.

---

21. Ускорение и замедление

Методы jQuery принимают второй аргумент — тип анимации:

• "linear" — равномерная скорость;

• "swing" — плавное начало и конец (по умолчанию).

$('#box').fadeIn(1000, 'linear');

---

22. Анимация чисел

Для счётчиков можно плавно увеличивать цифры:

$({count:0}).animate({count:1000}, {
  duration: 2000,
  step: function() {
    $('#num').text(Math.floor(this.count));
  }
});

HTML:

<div id="num">0</div>

---

23. Анимация высоты блока с контентом

Чтобы блок раскрывался под размер текста:

$('#toggle').click(function() {
  $('#text').animate({height: 'toggle'}, 500);
});

height: 'toggle' — встроенный трюк jQuery.

---

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

Каждый .animate() попадает в очередь.

Можно очистить её, если пользователь кликает слишком быстро:

$('#block').stop(true, false).animate({left:'+=100px'}, 300);

---

25. Создание собственной функции анимации

$.fn.shake = function() {
  this.animate({left: "-10px"}, 100)
      .animate({left: "10px"}, 100)
      .animate({left: "0px"}, 100);
  return this;
};

$('#btn').click(function() {
  $(this).shake();
});

Так можно сделать свой мини-плагин без внешних библиотек.

---

26. Как ускорить работу

Анимации могут тормозить, если элементов много.

Чтобы не грузить браузер:

• не анимируй width и height, лучше transform;

• избегай тяжёлых теней и градиентов;

• скрывай невидимые элементы (display:none).

---

27. Когда jQuery — лучший выбор

Он всё ещё удобен, если:

• проект небольшой;

• не хочется возиться с CSS-анимациями;

• нужно поддерживать старые браузеры;

• ты просто хочешь быстро добавить эффект.

---

28. Когда лучше CSS или JS

Если анимаций много, они сложные и постоянные (например, в SPA), — лучше использовать CSS transition, keyframes или GSAP.

jQuery всё же медленнее при множественных движениях.

---

29. Отладка

Если анимация не работает:

• проверь, что элемент существует (console.log($('#box').length));

• убедись, что стиль display не none (если fadeIn не запускается);

• проверь синтаксис ({} часто забывают закрыть).

---

30. Итог

jQuery до сих пор остаётся быстрым способом оживить сайт без плагинов и сложных библиотек.

Ты можешь сделать:

• плавное появление контента,

• выпадающее меню,

• анимированный скролл,

• красивую загрузку страницы,

• даже собственные мини-эффекты — буквально в пару строк.

И самое приятное — всё работает даже в старых браузерах.

Так что если хочешь добавить на сайт немного движения ✨ — jQuery всё ещё отличный выбор.