📘 Урок 8: Анимации и эффекты в jQuery — `fadeIn()`, `slideToggle()`, `animate()` и пользовательские анимации

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

---

🔹 Введение

Анимации помогают «оживить» сайт. jQuery предлагает простой способ добавлять эффекты к HTML-элементам без CSS-анимаций или JavaScript-фреймворков.

Среди самых популярных эффектов:

• плавное появление/исчезновение элементов,

• раскрытие/сворачивание блоков,

• плавное изменение размеров, отступов, прозрачности и других CSS-свойств.

---

🔸 Группы эффектов

Встроенные простые эффекты:

• show() / hide() / toggle()

• fadeIn() / fadeOut() / fadeToggle() / fadeTo()

• slideDown() / slideUp() / slideToggle()

Универсальный метод:

• animate() — для создания своих анимаций

---

🔸 fadeIn(), fadeOut(), fadeToggle()

Работают с прозрачностью (opacity), плавно появляя или скрывая элементы.

$('#box').fadeIn(1000);    // Появление за 1 секунду
$('#box').fadeOut(500);    // Исчезновение за 0.5 секунды
$('#box').fadeToggle();    // Переключение состояния

Можно указать продолжительность в миллисекундах, или строкой: 'slow', 'fast'.

---

📌 Пример:

<button id="fadeBtn">Показать/скрыть</button>
<div id="fadeBox" style="display:none; background:#ccc; padding:20px;">
  Блок с fade эффектом
</div>

<script>
  $('#fadeBtn').click(function() {
    $('#fadeBox').fadeToggle(500);
  });
</script>

---

🔸 slideDown(), slideUp(), slideToggle()

Изменяют высоту элемента, создавая эффект раскрытия/сворачивания:

$('#panel').slideDown();
$('#panel').slideUp();
$('#panel').slideToggle(400);

📌 Применимо к скрытым элементам с display: none.

---

📌 Пример:

<button id="slideBtn">Показать меню</button>
<ul id="menu" style="display:none;">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

<script>
  $('#slideBtn').click(function() {
    $('#menu').slideToggle();
  });
</script>

---

🔸 animate() — кастомная анимация

Позволяет изменять любой числовой стиль, например:

• width

• height

• opacity

• margin

• padding

• top, left (если элемент позиционирован)

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

---

📌 Пример: движение блока

<div id="moveBox" style="width:50px; height:50px; background:red; position:relative;"></div>
<button id="moveBtn">Двигать</button>

<script>
  $('#moveBtn').click(function() {
    $('#moveBox').animate({ left: '+=100px' }, 600);
  });
</script>

---

🔸 Установка колбэков

Любой метод анимации можно дополнить колбэком — функцией, которая вызовется после завершения анимации:

$('#box').fadeOut(500, function() {
  alert('Скрыт!');
});

---

🔸 Очереди и цепочки

Анимации можно выстраивать в цепочку:

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

---

🔸 Остановка анимации

Если пользователь кликает много раз подряд, анимации могут наслаиваться. Чтобы этого избежать — останавливаем предыдущие:

$('#box').stop(true, true).slideToggle();

• Первый true: очищает очередь,

• Второй true: завершает текущую анимацию мгновенно.

---

🔸 Пользовательские примеры

1. Анимация роста блока

$('#grow').click(function() {
  $('#block').animate({ width: '+=50px', height: '+=20px' }, 300);
});

2. Анимация появления с затуханием

$('#open').click(function() {
  $('#modal').fadeTo(400, 1);
});

$('#close').click(function() {
  $('#modal').fadeTo(400, 0);
});

---

🔸 Примеры с hover

Анимация по наведению:

$('.card').hover(
  function() {
    $(this).animate({ marginTop: '-10px' }, 200);
  },
  function() {
    $(this).animate({ marginTop: '0px' }, 200);
  }
);

---

📋 Практика

1. Сделай блок, который при клике «растёт» в 2 раза.

2. Создай скрытый текст, который плавно появляется и исчезает.

3. При наведении на кнопку — увеличивается её размер.

4. Реализуй аккордеон: при клике на заголовок — открывается текст.

5. Сделай модальное окно, которое плавно появляется по кнопке.

---

❗ Частые ошибки

❌ Одновременное выполнение нескольких animate()

✅ Используй .stop() для контроля:

$('#box').stop().animate(...);

---

❌ Анимация непозиционированного блока

✅ Для left, top укажи position: relative или absolute.

---

❌ Нельзя анимировать свойства типа color (в стандартной jQuery)

✅ Нужно использовать jQuery UI или CSS-переходы для таких свойств.

---

📌 Заключение

Анимации в jQuery — это простой способ добавить динамику и интерактивность. Даже без CSS или сложных JavaScript-библиотек, ты можешь оживить интерфейс всего в пару строк.