Reverse animation on a second click

Question

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?

my 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

Answer 1

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.

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

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> 

Answer 2

I have updated your Jsfiddle:

http://jsfiddle.net/VDesign/k52c9h12/5/

JS Code

$('.box').click(function(){
    if($(this).hasClass('open'))
    {
        $('.tab1').animate({top: '-=50px'}); 
        // add callback function to wait untill tab1 and 3 are back to 0
        $('.tab3').animate({top: '+=50px'}, function() {
          $('.tab1').toggle("slide", { direction: "left"}, 500);
          $('.tab2').toggle("slide", { direction: "left" }, 500);
          $('.tab3').toggle("slide", { direction: "left" }, 500);   
        }); 

        $(this).removeClass('open');
    } else {
        $('.tab1').toggle("slide", { direction: "left"}, 500);
        $('.tab2').toggle("slide", { direction: "left" }, 500);
        $('.tab3').toggle("slide", { direction: "left" }, 500);

        $('.tab1').animate({top: '+=50px'}); 
        $('.tab3').animate({top: '-=50px'}); 

        $(this).addClass('open');
    }
});

Answer 3

This is just an ordering problem. Try this out:

function slide(){
    $('.tab1').toggle("slide", { direction: "left"}, 500);
    $('.tab2').toggle("slide", { direction: "left" }, 500);
    $('.tab3').toggle("slide", { direction: "left" }, 500);
}

function expand(flag){
    $('.tab1').animate({top: (flag ? '+=50px' : '-=50px')}, 500); 
    $('.tab3').animate({top: (flag ? '-=50px' : '+=50px')}, 500);
}

$('.box').click(function(){
    var flag = ($(this).data('flag')!=undefined)?$(this).data('flag'):true;
    if(flag){
        slide();
        expand(flag);
    }
    else{
        expand(flag);
        setTimeout(slide, 500);
    }
    $(this).data('flag', !flag)
});