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

class .order-b在類.order-c中，因此事件點擊總是會在點擊進入div時觸發。 你必須使用http://api.jquery.com/event.stoppropagation/

Answer 2

您與類

"process-bar order-b" 

格是從

​​

父DIV所以，你的 「點擊」 從訂單-B -event也火災，如果你克利克在命令 - C。

你必須把那個孩子的課程順序-c放在外面。不在與「order-b」類的div中。