Javascript 切换jQuery.animate函数？

我试图创建一种情况，在点击时，菜单项滑出，然后垂直展开。我已经做到了这一点，但当菜单关闭和重新打开时，菜单项会从它们停止的地方重新出现，并进一步展开

如何切换或重置垂直移动

我的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:

---

为其他动画创建切换功能

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

.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;
}

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