Javascript .设置动画，不重复打开。切换单击事件_Javascript_Jquery_Html_Css_Animation

Javascript .设置动画，不重复打开。切换单击事件

javascript jquery html css animation

Javascript .设置动画，不重复打开。切换单击事件,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,我有一个菜单部分，它最初是隐藏的，但一旦汉堡/按钮点击，它将使用jquery的动画功能从原来的70px到90px进行动画制作。是的，它用于先切换，但当我通过点击按钮隐藏菜单，然后再次尝试点击按钮再次显示它时，然后。动画功能不启动这是你的电话号码代码您可以检查它是否使用布尔变量设置了动画，然后根据该变量重新定位导航。请阅读下面的工作片段： $（函数（）{ var isAnimated=假；变量$hamburger=$（“.hamburger”）； $hamburger.on（“点击”），

我有一个菜单部分，它最初是隐藏的，但一旦汉堡/按钮点击，它将使用jquery的动画功能从原来的70px到90px进行动画制作。是的，它用于先切换，但当我通过点击按钮隐藏菜单，然后再次尝试点击按钮再次显示它时，然后。动画功能不启动

这是你的电话号码

代码

您可以检查它是否使用

布尔变量设置了动画，然后根据该变量重新定位导航。请阅读下面的工作片段：

$（函数（）{
var isAnimated=假；
变量$hamburger=$（“.hamburger”）；
$hamburger.on（“点击”），功能（e）{
e、 预防默认值（）；
$hamburger.toggleClass（“处于活动状态”）；
如果（！isAnimated）{
$（“.nav”）.show（）.animate({
左：“90px”
}addClass（“动画fadeIn”）；
isAnimated=真；
}否则{
$（“.nav”）.hide（）.animate({
左：“70像素”
}removeClass（“动画fadeIn”）；
isAnimated=假；
}
});
});
.nav{
宽度：80%；
浮动：左；
位置：绝对位置；
顶部：62px；
左：70像素；
显示：无；
过渡：均为0.3秒；
}
@媒体屏幕和屏幕（最大宽度：992px）{
.导航{
顶部：40px；
左：70像素；
}
}
美国海军{
列表样式：无；
}
李国荣先生{
列表样式：无；
显示：内联块；
填充：0 18px；
}
李丽娜先生{
字号：18px；
颜色：#000；
字体大小：400；
}
.nav ul li a:悬停{
文字装饰：无；
}
.nav ul li a：有效{
文字装饰：无；
}
李：参观了{
文字装饰：无；
}
海军ulli a：聚焦{
文字装饰：无；
}
.汉堡包：悬停{
颜色：#000；
}

点击








<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

  <button class="menu-ham hamburger hamburger--squeeze" type="button" style="color:#fff">
  <span class="hamburger-box">
    <span class="hamburger-inner">click</span>
  </span>
</button>

<nav class="nav" role="navigation">
                        <ul><li id="menu-item-147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-147"><a href="#app_feature">Features</a></li>
<li id="menu-item-148" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-148"><a href="#app_why">Why</a></li>
<li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-149"><a href="#app_faq">FAQ</a></li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a href="#app_team">Team</a></li>
<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-136"><a href="#app_footer">Contact</a></li>
</ul>                   </nav>
</body>
</html>


.nav {
  width: 80%;
  float: left;
  position: absolute;
  top: 62px;
  left: 70px;
  display: none;
  transition: all 0.3s; }
  @media screen and (max-width: 992px) {
    .nav {
      top: 40px;
      left: 70px; } }
  .nav ul {
    list-style: none; }
    .nav ul li {
      list-style: none;
      display: inline-block;
      padding: 0 18px; }
      .nav ul li a {
        font-size: 18px;
        color: #000;
        font-weight: 400; }
        .nav ul li a:hover {
          text-decoration: none; }
        .nav ul li a:active {
          text-decoration: none; }
        .nav ul li a:visited {
          text-decoration: none; }
        .nav ul li a:focus {
          text-decoration: none; }



.hamburger:hover {
   color: #000;
}

$(function () {
        var $hamburger = $(".hamburger");
        $hamburger.on("click", function(e) {
            e.preventDefault();
            $hamburger.toggleClass("is-active");
            $(".nav").toggle().animate({
                left: "90px"
            }, 300 ).addClass("animated fadeIn");
        });
    });