[英]JS toggle with animation (animate.css)?
我正在尝试使用按钮切换(toggleClass)实现滑入式菜单。 我不知道如何添加动画。 我试图让它从顶部滑入(a.css中的动画名称是slideInDown
)
这是我的演示 ,所以你可以看到我拥有的东西。
HTML
<!-- ========== Navigation ========== -->
<a type="button" class="btn btn-blue nav-btn"><i class="fa fa-bars"></i></a>
<div class="navbar navbar-fixed-top closed" role="navigation" id="top-header">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a class="scroll" href="#home">Home</a></li>
<li><a class="scroll" href="#services">Services</a></li>
<li><a class="scroll" href="#works">Works</a></li>
<li><a class="scroll" href="#about">About</a></li>
<li><a class="scroll" href="#timeline">Timeline</a></li>
<li><a class="scroll" href="#blog">Blog</a></li>
<li><a class="scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
<!-- ========== /Navigation ========== -->
JS
// Open/close menu when button is clicked
$(".nav-btn").click(function () {
$(".navbar").toggleClass('closed open');
return true;
});
CSS片段
.open {
display:block;
visibility:visible;
}
.closed {
display:none;
visibility:hidden;
}
(这是我一般用于网站的animate.css )
编辑 :根据@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");
}
});
CSS
.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语句来检查它是否存在,以便我们可以轻松打开和关闭菜单。 这是codepen的链接。 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.