jQuery 动画冲突

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

您的 div 与 class

"process-bar order-b"

是来自

的parentdiv

"process-close order-c"

因此，如果您点击 order-c，来自 order-b 的 "click" 事件也会触发。

你必须把 child 和 class order-c 放在外面。不在 div 和 class "order-b".

Answer 2

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

jQuery 动画冲突

jQuery animations conflict

javascript

jquery

animation