Question

我使用jQuery动画来动画一些div。我有什么方法可以清除动画第二个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

在开始新动画之前，清除使用jquery动画完成的所有更改

2 个答案: