0

同じタグで開閉するスライドアウトメニューを作成しようとしています。何かをまとめましたが、開いた後に一時停止するのではなく、アニメーション全体を実行します。

HTML

<header>
    <nav>
        <ul class="slide-menu">
            <li class="menu-element"><a href="#" id="aboutopen">How tall?</a></li>
            <li class="menu-element"><a href="#book">Books</a></li>
            <li class="menu-element"><a href="weblink" target="_blank">Journal</a></li>
            <li class="menu-element"><a href="#" id="aboutcontact">Contact</a></li>
        </ul>
        <a id="puller" href="#">Menu</a>
    </nav>
</header>

Jクエリ

$(document).ready(function()
  {
   $("#puller").click(function(){
   $(".slide-menu").animate({
   marginLeft: '+=360px'
}, 500);
 });

 $("#puller").click(function(){
   $(".slide-menu").animate({
   marginLeft: '-=360px'
 }, 500);
 });


});

誰でもこれを手伝ってもらえますか？

4

2 に答える 2

3

jQuery トグルを使用することをお勧めします。すでにスライドアウトしているかどうかについてメニューの状態を維持し、このようなアクションを実行することもできます

$(document).ready(function(){

   var slide = false;
   $("#puller").click(function(){

   if(slide){
        $(".slide-menu").animate({marginLeft: '-=360x'}, 500);
        slide = false;
   }else{
       $(".slide-menu").animate({marginLeft: '+=360px'}, 500);
        slide = true
   }
   });

});
于 2013-11-13T23:23:18.087 に答える
2

のように jQuery Toggle を使用します。単純。

$(document).ready(function() {
    var menu = $('.slide-menu');
    var speed = 500; // set animation speed

    $('#puller').toggle(
        function(){
            menu.animate({
                marginLeft: '+=360px'
            }, speed);
        },
        function(){
            menu.animate({
                marginLeft: '-=360px'
            }, speed);
        }
    );
)};
于 2013-11-13T22:51:47.397 に答える