title: Clear all changes done with jquery animation before starting a new animation
body: <p>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?</p>
  
  <pre><code>      $(".order-b").click(function(event){
          $(".order-t").animate({top:'30%'}, "slow" );
        });
  
        $(".counsel-b").click(function(){
          $(".counsel-t").animate({top:'30%'}, "slow" );
        });
  
  
  &lt;div class="process-bars"&gt;
     &lt;!-- first DIV --&gt;
     &lt;div class="order-b"&gt;
        &lt;div class="order-t"&gt;
            &lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;
            &lt;h1&gt;Order&lt;/h1&gt;
        &lt;/div&gt;                                      
     &lt;/div&gt;
  
     &lt;!-- Second DIV --&gt;
     &lt;div class="counsel-b"&gt;
        &lt;div class="counsel-t"&gt;
            &lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;
            &lt;h1&gt;Order&lt;/h1&gt;
        &lt;/div&gt;                                        
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>.order-t, counsel-t {
  position:absolute;
  top:52%;
  width: 100%;
  margin:0 auto;
  z-index:2;
  </code></pre>
  
  <p>}</p>
  
  <p>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:</p>
  
  <pre><code>     $(".order-b").click(function(event){
          $(".order-t").animate({top:'30%'}, "slow" );
          $(".counsel-t").animate({top:'52%'}, "slow" );
        });
  </code></pre>