如何用點擊移動圖層

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