javascript - 如何通过单击移动图层

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 进行点击绑定(bind)，而不是 click ，因为它改进了内存使用和处理初始加载后添加的动态元素。要显示和隐藏菜单，一个简单的 toggleClass 就可以了。您可以在 CSS 中看到，我们在屏幕外设置了菜单的初始状态，然后，一旦添加了 open 类，我们就可以在屏幕上流畅地为其设置动画。

注意:移动 DOM 元素时，您要使用 translate 而不是 left、right，等。这样动画会更流畅，您将避免有时与未优化动画有关的故障行为(或“卡顿”)。 [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