Статья

Foops Сегодня 13:03

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

Анимация и эффекты на сайте — это не украшение ради украшения. Они помогают глазу «схватывать» изменения, а пользователю — понимать, что произошло: кнопка нажата, меню открылось, ссылка сработала. Если убрать анимации совсем, сайт будет ощущаться сухим и безжизненным.

Сегодня многие такие эффекты делают на CSS. Но библиотека jQuery до сих пор часто встречается в проектах, и её встроенных методов вполне хватает, чтобы оживить кнопки и меню без сторонних плагинов. В этой статье мы разберём простые и практичные эффекты именно для кнопок и меню. Всё с примерами кода, которые можно вставить и проверить.

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

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

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

А дальше писать код внутри готовности документа:

$(document).ready(function(){
  // здесь все эффекты
});

ЭФФЕКТЫ ДЛЯ КНОПОК

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

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

Самый простой приём — плавное изменение прозрачности.

<button class="btn1">Наведи на меня</button>

$(document).ready(function(){
  $(".btn1").hover(
    function(){
      $(this).fadeTo(200, 0.7);
    },
    function(){
      $(this).fadeTo(200, 1);
    }
  );
});

Когда наводим мышку, кнопка слегка «тускнеет». Когда уводим — возвращается.

2. Увеличение кнопки

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

<button class="btn2" style="width:100px;height:40px;">Кликни меня</button>

$(document).ready(function(){
  $(".btn2").hover(
    function(){
      $(this).animate({width: "120px", height: "50px"}, 200);
    },
    function(){
      $(this).animate({width: "100px", height: "40px"}, 200);
    }
  );
});

Важно не переборщить с увеличением, иначе кнопка будет «прыгать».

3. Эффект нажатия

Чтобы кнопка выглядела «физической», можно имитировать вдавливание.

<button class="btn3">Нажми</button>

$(document).ready(function(){
  $(".btn3").mousedown(function(){
    $(this).animate({marginTop: "5px"}, 100);
  }).mouseup(function(){
    $(this).animate({marginTop: "0px"}, 100);
  });
});

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

4. Подсветка фона

jQuery напрямую не умеет анимировать цвета, поэтому лучше сочетать его с CSS.

<style>
.btn4 {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.btn4.hovered {
  background: #2ecc71;
}
</style>

<button class="btn4">Подсветка</button>

$(document).ready(function(){
  $(".btn4").hover(function(){
    $(this).toggleClass("hovered");
  });
});

CSS отвечает за плавность, jQuery — за смену класса.

5. Блокировка кнопки

Иногда после клика нужно отключить кнопку.

<button class="btn5">Отправить</button>

$(document).ready(function(){
  $(".btn5").click(function(){
    $(this).prop("disabled", true)
           .animate({opacity: 0.5}, 500)
           .text("Отправлено");
  });
});

Кнопка «гаснет» и меняет текст. Пользователь понимает, что действие выполнено.

6. Кнопка-загрузка

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

<style>
.loading {
  background: #ccc !important;
}
</style>

<button class="btn6">Сохранить</button>

$(document).ready(function(){
  $(".btn6").click(function(){
    let btn = $(this);
    btn.addClass("loading").text("Загрузка...");
    setTimeout(function(){
      btn.removeClass("loading").text("Готово");
    }, 2000);
  });
});

7. Кнопка с иконкой-анимацией

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

<style>
.spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
</style>

<button class="btn7"><span class="icon">🔄</span> Обновить</button>

$(document).ready(function(){
  $(".btn7").click(function(){
    $(".icon", this).toggleClass("spin");
  });
});

Иконка начинает крутиться и останавливается при повторном клике.

ЭФФЕКТЫ ДЛЯ МЕНЮ

Меню — навигационный центр сайта. Без эффектов оно сухое, с эффектами — понятное и удобное.

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

Классика: кнопка + список.

<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(300);
  });
});

2. Аккордеон

Меню-гармошка, где открывается только один блок.

<h3 class="title">Раздел 1</h3>
<div class="content">Пункты меню 1</div>

<h3 class="title">Раздел 2</h3>
<div class="content">Пункты меню 2</div>

$(document).ready(function(){
  $(".content").hide();
  $(".title").click(function(){
    $(this).next(".content").slideToggle(300);
    $(".content").not($(this).next()).slideUp(300);
  });
});

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

Нужно показать, на какой странице мы находимся.

<ul id="nav">
  <li><a href="#">Главная</a></li>
  <li><a href="#">О нас</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

$(document).ready(function(){
  $("#nav li a").click(function(){
    $("#nav li a").removeClass("active");
    $(this).addClass("active");
  });
});

CSS:

.active { color: red; font-weight: bold; }

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

Плавное перемещение к блоку.

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

<div id="about" style="margin-top:1000px;">Блок "О нас"</div>

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

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

На мобильных часто прячут навигацию за «три полоски».

<div id="burger">☰</div>
<ul id="mobileMenu" style="display:none; background:#eee; padding:10px;">
  <li>Главная</li>
  <li>Услуги</li>
  <li>Контакты</li>
</ul>

$(document).ready(function(){
  $("#burger").click(function(){
    $("#mobileMenu").slideToggle(300);
  });
});

6. Липкое меню при скролле

Меню всегда видно сверху.

<style>
#topMenu {
  background: #333;
  color: white;
  padding: 10px;
  position: relative;
}
.fixed {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>

<div id="topMenu">Навигация</div>

$(document).ready(function(){
  let menu = $("#topMenu");
  let pos = menu.offset().top;
  $(window).scroll(function(){
    if($(window).scrollTop() > pos){
      menu.addClass("fixed");
    } else {
      menu.removeClass("fixed");
    }
  });
});

7. Многоуровневое меню

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

<ul id="multiMenu">
  <li>Главная</li>
  <li>Услуги
    <ul class="submenu" style="display:none;">
      <li>Дизайн</li>
      <li>Разработка</li>
    </ul>
  </li>
</ul>

$(document).ready(function(){
  $("#multiMenu li").hover(
    function(){
      $("ul", this).stop().slideDown(200);
    },
    function(){
      $("ul", this).stop().slideUp(200);
    }
  );
});

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

Интересно работает комбинация:

кликаем по пункту меню,
он подсвечивается,
меню закрывается,
страница плавно скроллится к блоку.

$(document).ready(function(){
  $("#nav li a").click(function(e){
    e.preventDefault();
    $("#nav li a").removeClass("active");
    $(this).addClass("active");
    $("#menu").slideUp(300);
    let target = $($(this).attr("href"));
    $("html, body").animate({
      scrollTop: target.offset().top
    }, 600);
  });
});

Ограничения jQuery-анимаций

Цвета и сложные трансформации (rotate, scale) лучше делать на CSS.
На мобильных лучше минимизировать анимации ради скорости.
Не стоит ставить много .animate() подряд без stop(), иначе эффекты будут «накручиваться».

Когда использовать jQuery, а когда CSS

CSS подходит для простых переходов: подсветка, плавное изменение размеров, наведение.
jQuery лучше для логики: открытие меню, аккордеон, бургер, блокировка кнопки, плавная прокрутка.

Обычно удобнее комбинировать: визуальную часть отдать CSS, а управляющую — jQuery.

Итог

Мы разобрали простые и рабочие эффекты для кнопок и меню:

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

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

Jquery Разработка

+ Читать