在開始新動畫之前清除所有使用jquery動畫完成的更改

Question

我使用jQuery動畫來爲某些div創建動畫。我有什麼辦法清除動畫第二格之前完成第一個div的所有更改？

 $(".order-b").click(function(event){ 
     $(".order-t").animate({top:'30%'}, "slow"); 
     }); 

     $(".counsel-b").click(function(){ 
     $(".counsel-t").animate({top:'30%'}, "slow"); 
     }); 


<div class="process-bars"> 
    <!-- first DIV --> 
    <div class="order-b"> 
     <div class="order-t"> 
      <i class="fa fa-shopping-cart"></i> 
      <h1>Order</h1> 
     </div>          
    </div> 

    <!-- Second DIV --> 
    <div class="counsel-b"> 
     <div class="counsel-t"> 
      <i class="fa fa-shopping-cart"></i> 
      <h1>Order</h1> 
     </div>           
    </div> 
</div> 

CSS代碼：

.order-t, counsel-t { 
position:absolute; 
top:52%; 
width: 100%; 
margin:0 auto; 
z-index:2; 

}

我要清除的第一個div的動畫，當我點擊第二個div。 我該怎麼做？！我不想做像下面的代碼：這個答案顯示

 $(".order-b").click(function(event){ 
     $(".order-t").animate({top:'30%'}, "slow"); 
     $(".counsel-t").animate({top:'52%'}, "slow"); 
     }); 

Answer 1

像：https://stackoverflow.com/a/9398960/1585362，清除已通過jQuery添加到元素，你可以使用這個CSS： $('.element').removeAttr('style');

Answer 2

您可以使用一個回調函數.animate()將運行第二個動畫的第一個完成後：

$(".counsel-b").click(function(){ 
    $(".order-t").animate({top:'52%'}, "slow", function(){ 
     $(".counsel-t").animate({top:'30%'}, "slow"); 
    });   
}); 

FIDDLE