Статья

Foops Сегодня 13:07

Простые эффекты для кнопок и меню на jQuery без плагинов

Оглавление

Эффекты для меню

Вступление

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

Но если всё статично и сухо, сайт выглядит скучно и старомодно. Чуть-чуть движения делает интерфейс живым: кнопка плавно подсвечивается при наведении, меню аккуратно выпадает, активный пункт выделяется.

jQuery хоть и старый инструмент, но до сих пор полезен, когда нужно быстро добавить эффекты без сложных плагинов. Библиотека умеет делать простые анимации буквально в пару строк.

В этой статье мы посмотрим:

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

Все примеры будут без сторонних плагинов, только чистый jQuery.

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

Прежде чем писать код, подключим библиотеку. Обычно это делают через CDN:

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

Эта строка должна быть перед закрывающим тегом </body>.

И ещё — писать скрипт лучше внутри конструкции:

$(document).ready(function(){
    // Здесь наш код
});

Так мы уверены, что HTML уже загрузился, и jQuery «видит» все элементы.

Эффекты для кнопок

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

Самый простой эффект: плавное изменение фона кнопки.

<button class="my-btn">Нажми меня</button>

$(document).ready(function(){
    $(".my-btn").hover(
        function(){
            $(this).animate({ backgroundColor: "#ffcc00" }, 300);
        },
        function(){
            $(this).animate({ backgroundColor: "#007BFF" }, 300);
        }
    );
});

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

2. Увеличение при наведении

$(".my-btn").hover(
    function(){
        $(this).animate({ transform: "scale(1.1)" }); // так не сработает!
    }
);

И вот здесь тоже ошибка: jQuery не понимает transform. Но можно обойти:

.my-btn {
  transition: transform 0.3s;
}
.my-btn:hover {
  transform: scale(1.1);
}

Часть эффектов всё-таки лучше делать через CSS. Но если хочется через jQuery, можно играть с шириной/высотой:

$(".my-btn").hover(
    function(){
        $(this).stop().animate({ width: "120px" }, 300);
    },
    function(){
        $(this).stop().animate({ width: "100px" }, 300);
    }
);

3. Имитация нажатия

Кнопка как будто «уходит внутрь» при клике:

$(".my-btn").mousedown(function(){
    $(this).animate({ marginTop: "5px" }, 100);
}).mouseup(function(){
    $(this).animate({ marginTop: "0px" }, 100);
});

4. Кнопка с загрузкой

Часто нужно показать, что идёт процесс.

<button class="load-btn">Отправить</button>

$(".load-btn").click(function(){
    var $btn = $(this);
    $btn.prop("disabled", true).text("Загрузка...");

    setTimeout(function(){
        $btn.prop("disabled", false).text("Готово!");
    }, 2000);
});

5. Кнопка с подсветкой (мигание)

$(".my-btn").click(function(){
    $(this).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200);
});

Эффект «внимание» — например, если форма заполнена неправильно.

Эффекты для меню

1. Выпадающее меню

HTML:

<ul class="menu">
  <li>Главная</li>
  <li>О нас
    <ul class="submenu">
      <li>Команда</li>
      <li>История</li>
    </ul>
  </li>
  <li>Контакты</li>
</ul>

CSS (скрываем подменю):

.submenu { display: none; }

jQuery:

$(".menu li").hover(
    function(){
        $(this).children(".submenu").stop().slideDown(300);
    },
    function(){
        $(this).children(".submenu").stop().slideUp(300);
    }
);

2. Аккордеон

<div class="accordion">
  <h3>Раздел 1</h3>
  <div class="content">Текст 1</div>
  <h3>Раздел 2</h3>
  <div class="content">Текст 2</div>
</div>

CSS:

.content { display: none; }

JS:

$(".accordion h3").click(function(){
    $(this).next(".content").stop().slideToggle(300);
    $(".accordion .content").not($(this).next()).slideUp(300);
});

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

$(".menu li").click(function(){
    $(".menu li").removeClass("active");
    $(this).addClass("active");
});

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

<a href="#section1">Вниз</a>
<div id="section1">Раздел</div>

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

5. Бургер-меню

HTML:

<div class="burger">☰</div>
<ul class="mobile-menu">
  <li>Главная</li>
  <li>О нас</li>
</ul>

CSS:

.mobile-menu { display: none; }

JS:

$(".burger").click(function(){
    $(".mobile-menu").slideToggle(300);
});

Комбинации эффектов

Можно соединять:

кнопка подсвечивается и увеличивается;
меню выпадает и подсвечивает активный пункт;
бургер появляется плавно и крутится иконкой.

Главное — не перегружать. Если на сайте всё прыгает и мигает, пользователь устанет.

Ошибки новичков и как их избежать

Ошибка 1. Злоупотребление `.animate()`

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

Лучше:

для цвета, трансформаций, теней — CSS;
для простых эффектов видимости — jQuery.

Ошибка 2. Нет `.stop()`

Если быстро наводить мышку, анимации «накапливаются». Меню начинает дёргаться.

$(".menu li").hover(
    function(){ $(this).children(".submenu").stop().slideDown(); },
    function(){ $(this).children(".submenu").stop().slideUp(); }
);

Ошибка 3. Попытка анимировать цвета

$(this).animate({ backgroundColor: "red" }); // не работает

jQuery не умеет цвета. Нужно CSS transition или jQuery UI.

Ошибка 4. Дублирование кода

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

Ошибка 5. Inline-стили

Не стоит вешать стили прямо в JS. Проще задать CSS-классы и переключать их через .addClass() и .removeClass().

Ошибка 6. Перегрузка процессора

Некоторые вешают анимации на scroll без ограничения. Это тормозит. Нужно использовать throttle или debounce.

Ошибка 7. Нет запасного варианта

Если у пользователя отключён JS, меню просто не работает. Надо, чтобы хотя бы базовая версия (без анимации) оставалась доступной.

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

Цвета, прозрачность, размеры, трансформации → CSS.
Показ/скрытие, работа со структурой DOM → jQuery.
Сложные анимации с таймингами → лучше CSS или GSAP.

Вывод

jQuery остаётся полезным для простых эффектов. В пару строк можно оживить кнопки и меню.

Главное — не переборщить, не анимировать всё подряд, и помнить про ошибки новичков: stop(), минимизация inline-стилей, баланс между CSS и JS.

Если соблюдать эти простые правила, интерфейс будет лёгким и приятным.

Jquery Разработка

+ Читать