Question

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

在第一个函数中，我无法为菜单链接创建延迟/淡入淡出。我需要＆＃39; .navbar-item＆＃39;单击菜单时淡入淡出。在第二个函数中，我需要在第二次单击菜单时将不透明度恢复为1.0。在第一个效果完成后我无法获得任何效果，即单击菜单链接中的菜单淡入淡出＆＃39; .values＆＃39;，单击菜单淡出菜单链接并还原＆＃ 39; .values＆＃39;至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并切换课程。

Answer 2

你很亲密，你刚刚犯了一些简单的错误。这是一个JSFiddle为您提供问题的解决方案：https://jsfiddle.net/nv1gytrs/1/

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div class="client-link"></div>
<div class="navbar"></div>
<div class="values"></div>

CSS：

.client-link {
    height: 100px;
    width: 100px;
    border: 2px solid green;
 }
 .navbar {
    height: 100px;
    width: 100px;
    border: 2px solid red;
 }
 .values {
    height: 100px;
    width: 100px;
    border: 2px solid blue;
    transition: all 1s;
 }
 .fade {
    opacity: 0.2;
 }

JS：

// Main Script For Site

$(document).ready(function() {
    $('.client-link').on("click", function() {
        $('.navbar').slideToggle("fast");
        $('.values').toggleClass("fade");
    });
});

当然，你所有的HTML和CSS都是你想要完成的，这只是一个例子。

JQuery汉堡菜单函数

2 个答案: