切换 jQuery .animate 函数
Toggle jQuery .animate function?
我试图创造一种情况,即单击时,菜单项滑出然后垂直展开。我已经做到了这一点,但是当菜单关闭并重新打开时,菜单项会从他们离开的地方继续并进一步扩散!
如何切换或重置垂直移动?
我的jQuery:
$('.box').click(function(){
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
});
$('.box').click(function(){
$('.tab1').animate({top:'+=50px'});
$('.tab3').animate({top:'-=50px'});
});
.html:
<div class="square">
<div class="box">
CLICK
<div class="tab1 tab"></div>
<div class="tab2 tab"></div>
<div class="tab3 tab"></div>
</div>
</div>
.css:
.square{
margin-left:100px;
}
.box{
position:relative;
width:150px;
height:150px;
background-color:#000;
color:#fff;
text-align:center;
}
.tab{
width:70px;
height:40px;
background-color:grey;
display:none;
}
.tab1{
position:absolute;
right:-70px;
top:50px;
}
.tab2{
position:absolute;
right:-70px;
top:50px;
}
.tab3{
position:absolute;
right:-70px;
top:50px;
}
JSFiddle
为其他动画创建切换功能
$('.box').click(function(){
var flag = $(this).data('flag');
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
$('.tab1').animate({top: (flag ? '+=50px' : '-=50px')});
$('.tab3').animate({top: (flag ? '-=50px' : '+=50px')});
$(this).data('flag', !flag)
});
小提琴
相关文章:
- jQuery animate()函数没有't设置动画
- JS异常:animate不是一个函数
- 有没有什么方法可以停止Jquery中的animate(也可以停止完整的回调函数)
- jQuery的slideUp,slideDown,animate函数的任何替代品
- 在jQuery中循环嵌套animate函数
- 如何调用Edge Animate's从外部Javascript中播放函数
- 如何使用jQuery中的animate函数从左向右滑动
- JQuery Animate 函数在制作动画之前跳到屏幕顶部
- 从函数中引用对象时遇到问题 - Adobe Animate canvas
- JQuery animate() 函数延迟且运行缓慢
- Jquery animate 函数中的步骤
- for 循环中的 jquery Animate 函数
- Jquery ui animate 函数不起作用
- 使用 jQuery animate 函数扩展内容区域
- jQuery animate 完整参数,仅用作匿名函数而不用作函数指针
- 切换 jQuery .animate 函数
- ASP .NET C# 中的 jQuery Animate Zoom 函数
- animate函数使用屏幕的高度
- animate方法函数执行意外延迟
- 如何从html外部调用jQuery函数:animate ?