メニューボタンを押した後のJQueryのサイドバーsildes

メニューボタンを押した後にサイドバーメニューが左から表示されるように、JQueryでアニメーション機能を使用しようとしています。私はスタックオーバーフローのデータベースを検索しましたが、私はまだそれを動作させることができませんでした。ですから、メニューボタンを押した後、1秒遅れで左から右にスライドさせる必要があります。メニューボタンを押した後のJQueryのサイドバーsildes

<html> 
<head> 

<meta charset="utf-8"> 
<title>Sok-app</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
<div class="background-2" > 
<button id="menu_button"> <a href="#menu"> 
    &#9776; </a> </button> 
    <div class="sidebar" style="width:130px display:none"> 

    <button id="your-best-ap" >Your app</button> 
    <button id="team-history-conta" >Team</button> 
    <button id="team-history-conta" >History</button> 
    <button id="team-history-conta" >Contact</button> 
    <button id="suggest-to-a-friend" >Suggest to a friend</button> 
</div> 
</div> 
</div> 

<script> 
$(document).ready(function(){ 
    $("#menu_button").click(function(){ 
     $(".sidebar").animate({left: '412px'}); //animate margin to create slide from left animation 
    }, 1000);          //duration of animation, in milliseconds 
}); 
</script> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<script type="text/javascript" src="script.js"></script> 
</body> 
</html>

出典

2017-07-31 Sokratis V

あなたはアニメーション、期間clickにイベントを設定していません。そして、このコードはalertを実行することができません。なぜなら、最初の文で述べた書式設定エラーがあるからです。このような

変更して、

$(document).ready(function(){ 
    $("#menu_button").on("click",function(){ 
     $(".sidebar").animate({left: '412px', width:'toggle'},1000); 
     // duration after animate properties 
    });         
});

Result

希望に役立ちます、それは（412px幅の地点から右に）、さらに移動が

出典

2017-07-31 13:00:27 Berkay

は、あなたの答えをありがとう、ボタンを押すたびに動作します。 –

次にそれを-412にする@SokratisV – Berkay

メニューボタンを押した後のJQueryのサイドバーsildes

答えて

関連する問題