Question

我正在尝试创建一个滑出菜单，在同一个标签上打开一个关闭。我把一些东西放在一起，但它贯穿整个动画，而不是在打开后暂停。

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>

Jquery的

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

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


});

任何人都可以帮忙吗？

Answer 1

使用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
   }
   });

});

Answer 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);
        }
    );
)};

菜单打开＆amp;关闭菜单按钮 - Jquery

2 个答案: