如何完成汉堡动画

Question

对不起，我是初学者。我怎样才能完成这个功能。点击汉堡，面包旋转并形成一个"x"。单击"x"后，它应该会再次向后移动。我的第二个问题是，当面包形成"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/

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文件中(控制动画。

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

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