jQuery知道第一個過渡已經完成，然後使第二個

Question

在jquery中，我正在做一個小動畫。在那裏我採取了兩個div。所以基本上邏輯就是這樣，當鼠標懸停時，它會顯示一個帶有轉換的隱藏div。第二格也是一樣的概念。但我的問題是，當我在第一個div上懸停時，它顯示了轉換中的隱藏div。但是當我在另一個div上懸停時，第一個隱藏的是隱藏的，第二個隱藏的div顯示在第二個div中。所以我想，當我將鼠標懸停在第二個div上時，第一個隱藏的div應該先隱藏，然後第二個隱藏的div將被顯示。

這裏是我到目前爲止的代碼

<div id="wrapper"> 
     <div class="courses-method-left-wrapper"> 
      <div class="courses-method-wrap left"> 
       <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem </p> 
      </div> 
      <div class="online-course-price-wrap"> 
       <h3>Left content wrap</h3> 
       <h6>Left content text</h6> 
      </div> 
     </div> 
     <div class="courses-method-right-wrapper"> 
      <div class="courses-method-wrap right"> 
       <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem </p> 
      </div> 
      <div class="offline-course-price-wrap"> 
       <h3>Right content wrap</h3> 
       <h6>Right content text</h6> 
      </div> 
     </div>  
    </div> 

我的CSS到目前爲止

#wrapper { 
      width: 100%; 
      clear: both; 
      overflow: hidden; 
      background: #D7DFE6; 
      position: relative; 
     } 
     .courses-method-left-wrapper, .courses-method-right-wrapper { 
      width: 45%; 
      padding: 10px; 
      overflow: hidden; 
      float: left; 
      position: relative; 
     } 
     .courses-method-wrap.left { 
      float: left; 
      position: relative; 
      left: 0px; 
     } 
     .courses-method-wrap.right { 
      position: relative; 
     } 
     .online-course-price-wrap { 
      width: 230px; 
      background: #1C2C39; 
      position: absolute; 
      right: -230px; 
      height: 200px; 
     } 
     .offline-course-price-wrap { 
      left: -200px; 
      z-index: 0; 
      width: 200px; 
      position: absolute; 
      height: 100%; 
      top: 0px; 
      background: #ccc; 
      height: 200px; 
     } 
.hovered .online-course-price-wrap { right: 0px; } 
.hovered .offline-course-price-wrap { left: 0px; } 
#wrapper * { 
    -webkit-transition: all 0.7s ease-out; 
    transition: all 0.7s ease-out; 
    -moz-transition: all 0.7s ease-out; 
} 

和js代碼是這樣的

jQuery('body').on('hover','.courses-method-left-wrapper,   .courses-method-right-wrapper', function(){ 
     jQuery(this).toggleClass('hovered'); 
    }); 

這裏是小提琴link

因此，有人可以告訴我如何在一個轉換完成之後完成另一個轉換，或者我應該如何檢查第一個動畫是否已經完成，以便第二個動畫可以啓動？任何幫助和建議都將非常可觀。謝謝

Answer 1

您可以利用帶有jQuery的transitioned事件來捕獲轉換何時結束。

jQuery('.courses-method-left-wrapper').mouseenter(function() 
{ 
    //If the previous div is already hovered... 
    if($('.courses-method-right-wrapper').hasClass('hovered')) 
    { 
     $('.courses-method-right-wrapper').removeClass('hovered'); 
     $('.courses-method-right-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
      $('.courses-method-left-wrapper').addClass('hovered'); 
     }); 
    } 
    else // The previous div isn't hovered (i.e. on page load...) 
    { 
     $('.courses-method-left-wrapper').addClass('hovered'); 
    } 
}); 

jQuery('.courses-method-right-wrapper').mouseenter(function() 
{ 
    //If the previous div is already hovered... 
    if($('.courses-method-left-wrapper').hasClass('hovered')) 
    { 
     $('.courses-method-left-wrapper').removeClass('hovered'); 
     $('.courses-method-left-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
      $('.courses-method-right-wrapper').addClass('hovered'); 
     }); 
    } 
    else // The previous div isn't hovered (i.e. on page load...) 
    { 
     $('.courses-method-right-wrapper').addClass('hovered'); 
    } 
}); 

供應商前綴增加了全兼容，including two for Opera

你可以看到在this fiddle我準備在行動代碼。它可以得到改進（如果你移動鼠標太多，兩個隱藏的div可能會顯示，直到你再次懸停），但它應該給你一個很好的開始。

Answer 2

一個快速的解決問題的方法是使用的700毫秒的延遲到0.7秒中的轉換匹配，像這樣：

jQuery(this).toggleClass('hovered', function(){ 
    setTimeout(function(){ 
     alert('done'); 
    }, 700); 
}); 

http://jsfiddle.net/aym037ge/2/

這不是一個完美的解決方案，但一不過。

另一種選擇是使用如前面提到的，這裏的過渡事件：

Callback on CSS transition