如何通过单击移动图层

Question

当单击菜单图标时，我正在制作一个从屏幕右侧滑入的菜单。问题是，我不知道如何为它创建 jquery。现在我能够在页面加载后使菜单滑动覆盖一半屏幕，但是有人可以帮我在单击菜单图标后将其更改为动画，然后在单击菜单图标时滑回右侧（左：100％）第二次？

我可以让它在页面加载上工作，但不能：

$("button").click(function(){

这是我所拥有的：

CSS

#menulayer {
height: 100%;
width: 100vw;
background-color: #999;
position: fixed;
z-index: 1;
left: 100%;
}

JQ

$(document).ready(function(){
$("#menulayer").delay(3000).animate({left:'50%'});
});

Answer 1

我使用 jQuery 的 on 进行点击绑定，而不是 click，因为它提高了内存使用率和处理初始加载后添加的动态元素。要显示和隐藏菜单，一个简单的toggleClass 就可以了。您可以在 CSS 中看到我们将菜单的初始状态设置为屏幕外，然后，一旦添加了 open 类，我们就会在屏幕上平滑地对其进行动画处理。

注意：在移动 DOM 元素时，您希望使用 translate 而不是 left、right 等。这样动画更流畅，您将避免出现故障行为（或“jank”）有时涉及未优化的动画。 [1]

$('.toggle-button').on('click', function() {
  $('.menu').toggleClass('open')
})

.toggle-button {
  position: absolute;
  top: 50px;
  left: 50px;
  border: 1px solid #333;
}

.menu {
  background: red;
  display: inline-block;
  padding: 20px 40px;
  position: fixed;
  right: 0;
  transform: translateX(100%);
  transition: 0.5s transform;
}

.menu.open {
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-button">toggle menu</button>

<ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

[1]High Performance Animations