javascript - 如何完成汉堡动画？

对不起，我是初学者。
如何完成此功能。通过单击汉堡，the头旋转并形成一个“ x”。单击“ x”后，应再次向后退。我的第二个问题是，当s头形成“ x”时，它们仍会进行悬停移动（垂直移动）。

$('#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/

最佳答案

$('#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文件中）。

进一步的改进可能是不使用id选择器进行样式设置（这是非常有限的，因为它是绝对的）。尽量不要将选择器嵌套得太深，否则会降低性能，或者在某个时候失去对样式的控制。看一下系统性或模块化方法，例如BEM。如果您严格地组织样式，以后就不会再麻烦了。

另一件事是，如果通过更改CSS属性为元素设置动画并已经使用transform，那么为什么不坚持呢？您可以避免使用其他属性，例如top。也可以提高性能。 （High Performance Animation）。
关于JavaScript，您可以将选定的元素保存在变量中，而不必再次选择它们。
var $hamburger = $('#hamburger'); $hamburger.on('click', ...);
您也可以使用on方法，这是jQuery中事件处理的首选方法。
$hamburger.on('click', function() {});代替$hamburger.click(function() {});