Обратная анимация при втором щелчке

Question

У меня есть элементы подменю, которые имеют щелчок, выдвигаются, затем разворачиваются, чтобы заполнить пробел. Во втором клике я хочу, чтобы анимация была обратная, прежде чем в нее вдвигаться, но мои знания jquery недостаточно хороши для этого. Может ли кто-нибудь помочь?

мои ЯШ:

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

анимаций для элемента запуска после предыдущего завершения, поэтому на данный момент левая скользит всегда будет работать, и когда это закончится, вертикальные анимации пинки в

. Когда значение flag истинно, вы хотите, чтобы сначала выполнялась вертикальная анимация. Поэтому сначала вам нужно сделать вертикальную анимацию.

Другая проблема заключается в том, что вы не анимации .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>

Answer 2

Я обновил ваш Jsfiddle:

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

JS код

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

Это просто проблема заказа. Попробуйте это:

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