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