Как завершить анимацию гамбургера?

Question

Извините, я новичок. Как я могу выполнить эту функцию. Нажав на бургер, булочки вращаются и образуют "х". После нажатия на "х" он должен снова вернуться назад. Моя вторая проблема заключается в том, что, когда булочки образовали букву "х", они по-прежнему совершают движение при наведении (перемещение вертикально).

$('#hamburger').click(function() {
  $('nav').fadeToggle(200);
});

$('#hamburger').click(function() {
  $('#top-bun').css('transform','rotate(45deg)');
  $('#bottom-bun').css('transform','rotate(-45deg)');
  $('#top-bun').css('top','35%');
  $('#bottom-bun').css('bottom','35%');
});

https://jsfiddle.net/bncqjxa9/

Answer 1

$('#hamburger').click(function() {
    $('nav').fadeToggle(200);
});
        
$('#hamburger').click(function() {
    $(this).toggleClass('open');
});

#hamburger{
 position: fixed;
 z-index: 150;
 top: 30px;
 right: 30px;
 width: 40px;
 height: 25px;
 border: 0;
 background: none;
    cursor: pointer;
}
#hamburger .bun{
 display: block;
 position: absolute;
 left: 0;
 height: 4px;
 width: 100%;
 background: black;
 transition: 0.2s;
}
#top-bun{
 top: 0;
 margin-top: 3px;
}
#bottom-bun{
 bottom: 0;
 margin-bottom: 3px;
}
#hamburger.open #top-bun {
    transform: rotate(45deg);
    top: 35%;
}
#hamburger.open #bottom-bun {
    transform: rotate(-45deg);
    bottom: 35%;
}
nav{
 display: none;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="hamburger">
  <div class="bun" id="top-bun"></div>
  <div class="bun" id="bottom-bun"></div>
</button>

<nav>
  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
  </ul>
</nav>

Это может помочь уменьшить методы для анимации. В этом случае вы играли с CSS и JavaScript. Чтобы сделать это проще, я сократил его до просто CSS и просто переключил один класс, чтобы иметь контроль над анимацией в одном месте (в файле css).

Дальнейшие улучшения могут заключаться в том, чтобы не использовать селектор идентификатора для стиля (он очень ограничен, потому что он абсолютен). Старайтесь не вкладывать селекторы вглубь, иначе это может снизить производительность или в какой-то момент потерять контроль над стилем. Взгляните на систематические или модульные подходы, такие как, например, БЭМ. Если вы строги в организации своих стилей, вы не столкнетесь с проблемой позже.

Другое дело, если вы анимируете свои элементы, изменяя атрибуты CSS, и уже используете transform тогда почему бы не придерживаться этого? Вы можете избежать использования других атрибутов, таких как top например. Может улучшить производительность тоже. ( Высокопроизводительная анимация). А что касается вашего JavaScript, вы можете сохранить выбранные элементы в переменных, чтобы вам не приходилось выбирать их снова. var $hamburger = $('#hamburger'); $hamburger.on('click', ...); Также вы можете использовать on метод, который является предпочтительным, когда дело доходит до обработки событий в jQuery. $hamburger.on('click', function() {}); вместо $hamburger.click(function() {});