Question: I used jQuery animation to animate some div's. I there any way to clear all changes done to first div before animation second 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 code:

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

```

}

I want to clear animation of the first div when I click on the second div.
How can I do that?! I don't want to do it like the code below:

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

```

Answer: 
Like shown in this answer: <https://stackoverflow.com/a/9398960/1585362>, to clear the css that has been added to an element via jquery you can use this: 
`$('.element').removeAttr('style');`
You can use a callback function with `.animate()` which will run the second animation after the first one has completed:

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

```

[**FIDDLE**](http://jsfiddle.net/d2uvapkr/)