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

如何通过单击移动图层

1 个答案: