[英]HowTo: First click animation 1, second click animation 2
I am about to build a mobile burger menu that animates as follows: 我将要构建一个移动汉堡菜单,其动画效果如下:
1) Click 1 on burger menu: menu open animation...nav links fade-in last 1)在汉堡菜单上单击1:菜单打开动画...导航链接在最后淡入
2) Click 2 on burger menu: nav links fade-out first...menu close animation 2)在汉堡菜单上单击2:导航链接首先淡出...菜单关闭动画
I am animating with jQuery: 我正在用jQuery动画:
/* mobile menu fx */
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
$('#mobile-menu').toggleClass('open');
$('#mobile-menu-elements').toggleClass('open');
$('#mobile-menu-blurredBg').toggleClass('open');
$('#mobile-menu-elements-ul').toggleClass('open');
});
});
How can I set a different class for the second click (closing the menu)? 如何为第二次点击设置不同的类(关闭菜单)?
If you want to do it in the JS side, why dont you try to add a count variable, see if it works: 如果要在JS端执行此操作,为什么不尝试添加一个count变量,看看它是否有效:
/* mobile menu fx */
$(document).ready(function(){
var count = 0;
$('#nav-icon4').click(function(){
if(count == 0){
// do something in the first click;
count++;
} else{
// do something in the second click;
count=0;;
}
// Dont know which one goes in the first or in the second click
$(this).toggleClass('open');
$('#mobile-menu').toggleClass('open');
$('#mobile-menu-elements').toggleClass('open');
$('#mobile-menu-blurredBg').toggleClass('open');
$('#mobile-menu-elements-ul').toggleClass('open');
});
});
I know it's a bit dirty and there could be better ways. 我知道这里有点脏,可能还有更好的方法。 I haven't checked if it works, but this is just one of them, hope it helps.
我还没有检查它是否有效,但这只是其中之一,希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.