두 번째 클릭시 애니메이션 반전하기

Question

나는 클릭했을 때 밖으로 밀어 낸 다음 공간을 채우기 위해 펼쳐지는 하위 메뉴 요소를 가지고 있습니다. 두 번째 클릭에서 나는 안으로 들어 오기 전에 애니메이션을 되 돌리고 싶습니다. 그러나 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) 
}); 

JSFiddle

Answer 1

이전 후에 실행 요소에 대한 애니메이션, 완료하고이에, 수직 애니메이션 차기를 완료했다

: 이것 좀보십시오. 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>

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