第二次单击时反转动画 [英] Reverse animation on a second click

问题描述

我有点击的子菜单元素，滑出然后展开以填充空格。在第二次单击时，我希望动画在滑入之前反转，但是我的jquery知识不足以实现这一点。有人可以帮忙吗？

I have submenu elements that has on click, slide out then spread out to fill a space. On the second click I'd like the animation to reverse before sliding in, but my jquery knowledge isn't good enough to achieve this. Can anyone help please?

我的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)
});

JSFiddle

推荐答案

元素的动画在上一个元素完成后运行，所以目前左侧幻灯片将始终运行，完成后，垂直动画将启动。

The animations for an element run after the previous one has finished, so at the moment the left slides will always run and when that has finished, the vertical animation kicks in.

当 flag 为true时，您希望首先运行垂直动画。所以你需要先做垂直动画。

When flag is true, you want the vertical animation to run first. So you need to do the vertical animation first.

另一个问题是你没有动画 .tab2 在垂直动画中，所以它开始收缩太早，看起来很奇怪。您可以通过在垂直动画期间通过 0px 设置动画来解决此问题，因此它将等到缩小的正确时间：

The other issue then is that you are not animating .tab2 in the vertical animation, so it starts shrinking too early and looks odd. You can get around this by animating it by 0px during the vertical animation, so it will wait until the correct time to shrink:

$('.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>

这篇关于第二次单击时反转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！