Is there a way to reset the changes made to the first div before animating the second div using jQuery animation?
$(".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 am looking for a way to clear the animation of the first div when clicking on the second div without implementing code like the one below. How can I achieve this?
$(".order-b").click(function(event){
$(".order-t").animate({top:'30%'}, "slow" );
$(".counsel-t").animate({top:'52%'}, "slow" );
});