我有一些子菜单元素,可以单击、滑出然后展开以填充空间。在第二次单击时,我希望动画在滑入之前反转,但我的 jquery 知识不足以实现此目的。有人可以帮忙吗?
我的js:
$('.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)
});
最佳答案
元素的动画在前一个元素完成后运行,因此此时左侧幻灯片将始终运行,当该元素完成时,垂直动画将开始运行。
当flag
为true时,您希望首先运行垂直动画。所以你需要先做垂直动画。
另一个问题是您没有在垂直动画中对 .tab2
进行动画处理,因此它开始收缩得太早并且看起来很奇怪。您可以通过在垂直动画期间将其动画 0px
来解决此问题,因此它将等到正确的时间收缩:
$('.box').click(function(){
var flag = $(this).data('flag');
if(flag) {
$('.tab1').animate({top: '+=50px'});
$('.tab3').animate({top: '-=50px'});
$('.tab2').animate({top: '+=0px'});
}
$('.tab1, .tab2, .tab3').toggle("slide", { direction: "left"}, 500);
if(!flag) {
$('.tab1').animate({top: '-=50px'});
$('.tab3').animate({top: '+=50px'});
}
$(this).data('flag', !flag)
});
.square{
margin-left:100px;
}
.box{
position:relative;
width:150px;
height:150px;
background-color:transparent;
color:#fff;
text-align:center;
}
.tab4{
position:absolute;
right:10px;
top:50px;
width:70px;
height:40px;
background-color:grey;
}
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="square">
<div class="box">
<div class="tab4">CLICK</div>
<div class="tab1 tab"></div>
<div class="tab2 tab"></div>
<div class="tab3 tab"></div>
</div>
</div>
关于javascript - 第二次单击时反转动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27166633/