在开始新动画之前清除所有使用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