クリックでレイヤーを移動する方法

Question

メニューアイコンをクリックすると、画面の右側からスライドするメニューを作っています。それはjqueryを作成する方法がわかりません。今では、ページロード後に画面の半分を覆うようにメニューをスライドさせることができましたが、メニューアイコンをクリックした後にアニメーションを変更してから、メニューアイコンをクリックすると右にスライドします（左：100％）もう一度？私はそれがpageloadではなく、で動作するように取得することができます

：ここ

$("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要素を移動するとき、あなたはむしろleftよりtranslateを使用したい、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