CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Afshin
Afshin

Reputation: 2437

Clear all changes done with jquery animation before starting a new animation

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

Upvotes: 0

Views: 241

Answers (2)

jmore009
jmore009

Reputation: 12933

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

Upvotes: 0

Jack
Jack

Reputation: 2771

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

Upvotes: 1

Related Questions