jQuery 动画冲突

jQuery animations conflict

本文关键字：冲突 动画 jQuery      更新时间：2023-09-26

我尝试使用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>

我做错了什么？！

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

你的div 与类

"process-bar order-b"

是来自的父div

"process-close order-c"

因此，如果您轻拂订单 c，来自订单 b 的"点击"事件也会触发。

你必须把那个孩子和班级顺序-c放在外面。 不在带有类"订单-B"的div 中。

相关文章：