javascript - JQuery 汉堡包菜单函数

Question

下面是我试图编写的脚本，用于在单击网站的菜单按钮时控制两个功能；它是一个切换菜单链接的汉堡菜单。第一个函数显示/隐藏菜单链接，第二个函数淡化页面上的元素，这两个函数都在单击菜单按钮时激活。

在第一个函数中，我无法为菜单链接创建延迟/淡入。单击菜单时，我需要“.navbar-item”淡入淡出。在第二个函数中，我需要在第二次单击菜单时将不透明度恢复为 1.0。在第一个效果完成后，我无法获得任何效果，即单击菜单以淡入菜单链接并使“.values”变暗，单击菜单以淡出菜单链接并将“.values”恢复为 100%不透明度。

<div class="container">
    <section class="header">
      <h2 class="title"><a href="index.html">Title</a>
      <li class="client-item"><a class="client-link" href="#"><i class="fa fa-bars"></i></a></li></h2>
    </section>
    <nav class="navbar" style="display: none;">
      <ul class="navbar-list">
        <li class="navbar-item"><a class="navbar-link" href="#" target="_top">Contact</a></li>
        <li class="navbar-item navbar-link">Store</li>
      </ul>
    </nav>

<div class="section values">
        <div class="container">
          <div class="row">
            <div class="one-full column">
            </div>
          </div>
        </div>
</div>



 // Main Script For Site

    $(document).ready(function() {
  $('.client-link').click(function() {
          $('.navbar').slideToggle("fast");
          $('.values').animate({opacity:'0.6'});
  });
});

Answer 1

This answer给出了如何获得同步动画。 jQuery 自己的文档描述了 slideToggle ，包括您需要设置的位，类似于 animate 需要设置的方式。

我可能还会指出，没有理由像您那样将 animate 调用分开。由于它们是由同一事物触发的，因此应该从同一个地方调用它们。

我认为是这样的:

$(document).ready(function() {
  $('.client-link').click(function() {
    var $this = $(this);
    var opening = !$this.data('isOpen');
    $this.data('isOpen',opening);
    if(opening) {
      // opening animations
      $('.navbar').slideDown({duration:'fast',queue:false});
      $('.values').animate({opacity:1},{queue:false});
    } else {
      // closing animations
      $('.navbar').slideUp({duration:'fast',queue:false});
      $('.values').animate({opacity:0},{queue:false});
    }
  });
});

尽管将动画移至 CSS 并仅切换一个类可能会更好。