Question

我尝试使用jQuery动画为div的内容设置动画，并使用关闭按钮将所有内容重置为默认值。问题在于，在单击关闭按钮并将所有内容重置为默认值后，第一个动画将再次启动。

$(document).ready(function(){
      $(".order-b").click(function(){
        $(".order-t").animate({top:'30%'}, "slow" );
        $(".order-c").animate({opacity: '1', top:'70%'}, "slow" );
        $(".order-ca").delay('800').animate({opacity:'1'}, "slow" );
      }).clearQueue().stop();

      $(".order-c").click(function(){
        $(".order-ca").animate({opacity:'0'}, "fast" );
        $(".order-t").delay('800').animate({top:'52%'}, "slow" );
        $(".order-c").delay('800').animate({opacity: '0', top:'70%'}, "slow" );

      });
});

<div class="process-bars">
   <div class="process-bar order-b">
      <div class="process-title order-t">
          <i class="fa fa-shopping-cart"></i>
          <h1>Order</h1>
      </div>
      <div class="process-caption order-ca">
          <p>Text</p>
      </div>
      <div class="process-close order-c">
          <i class="fa fa-times-circle"></i>
      </div>                                         
    </div>
</div>

我做错了什么？！

Answer 1

类.order-b在类.order-c中，因此在点击进入div时始终会触发事件单击。您必须使用http://api.jquery.com/event.stoppropagation/

Answer 2

你的班级

"process-bar order-b"

是来自

的父div

"process-close order-c"

因此，如果你点击订单-c，你的“点击” - 来自订单-b的事件也会触发。

你必须把那个孩子的班级命令-c放在外面。不在“order-b”类的div中。

jQuery动画冲突

2 个答案: