Javascript 使用动画切换JS（animate.css）？

我正在尝试实现一个带有按钮切换（toggleClass）的滑入菜单。我不知道如何添加动画。我试图让它从顶部滑入（a.css中的动画名称是

slideInDown

）

这是我的，所以你可以看看我有什么

HTML

CSS片段

.open {
    display:block;
    visibility:visible;  
}

.closed {
    display:none;
    visibility:hidden;
}

（这是我在网站上通常使用的）

编辑：根据@stewbydoo的回答（非常感谢！），我想到了：

// Open/close menu when button is clicked
$(".nav-btn").click(function () {
  if($(".navbar").hasClass("closed")){
    $(".navbar").removeClass("closed");
    $(".navbar").addClass("animated slideInDown");
  }else{
    $(".navbar").removeClass("animated slideInDown");
    $(".navbar").addClass("closed");
  }
});

---

看起来有点乱，但是滑下来很好。现在我需要弄清楚如何让它再次（很好地）向上滑动：）

好的，所以我知道你想使用animate.css来实现这一点。我很好，但下面是我提出的解决方案。大约10行JS，减去5行CSS。不管怎么说，都在这儿。而不是在CSS类之间切换。我们可以只使用jQuery动画函数并操作CSS left属性

JS

$(".nav-btn").click(function () {
  if($(".navbar").hasClass("closed")){
    $(".navbar").removeClass("closed");
    $(".navbar").animate({
      top: '0px'
    }, 1000);
  }else{
    $(".navbar").animate({
      top: '-100px'
    }, 1000);
    $(".navbar").addClass("closed");
  }
});

.navbar {
    display: block;
    min-height: 100px;
    border: none;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    -moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    position: fixed;
    top: -100px;
}

/* Comment this part out or just delete it. 
.closed {
    display:none;
    visibility:hidden;
}*/

CSS

$(".nav-btn").click(function () {
  if($(".navbar").hasClass("closed")){
    $(".navbar").removeClass("closed");
    $(".navbar").animate({
      top: '0px'
    }, 1000);
  }else{
    $(".navbar").animate({
      top: '-100px'
    }, 1000);
    $(".navbar").addClass("closed");
  }
});

.navbar {
    display: block;
    min-height: 100px;
    border: none;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    -moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    position: fixed;
    top: -100px;
}

/* Comment this part out or just delete it. 
.closed {
    display:none;
    visibility:hidden;
}*/

我所做的只是向标记中添加一个类，但该类实际上并不具有CSS的意义。我注释掉了你的封闭类，因为这样做是不必要的。此外，我还添加了位置，并将顶部位置设置为

-100px

，以隐藏导航条

min height

为

100px

---

我使用这个类的目的就是让if语句检查它是否存在，这样我们就可以轻松地打开和关闭菜单。这里有一个链接到。希望这有帮助

你想让它从左上到右下滑动吗？在问题中张贴你的代码。@stewbydoo从顶部开始（但最终这并不重要）