Javascript jQuery知道第一个转换已经完成，然后进行第二个转换

在Jquery中，我正在做一个小动画。在这方面，我已采取了两个div。所以基本上，当鼠标悬停时，逻辑是这样的，它将显示一个隐藏的div和transition。同样的概念也适用于第二个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>

js代码是这样的

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

这是小提琴

---

那么，有人能告诉我如何在另一个动画开始后完成一个过渡，或者我如何检查第一个动画已经完成，以便第二个动画开始？任何帮助和建议都是非常值得的。谢谢

您可以利用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');
    }
}); 

添加供应商前缀以实现完全兼容性

---

您可以在我准备的中看到代码的作用。它可以改进（如果你移动鼠标太多，两个隐藏的div可能会出现，直到你再次悬停），但它应该给你一个良好的开端。

解决问题的一个快速方法是使用700ms的延迟来匹配你的0.7s过渡，如下所示：

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

这不是一个优雅的解决方案，但却是一个

另一种选择是使用前面和这里提到的转换事件：

---

相关：就个人而言，我认为在隐藏第一个div的同时显示第二个div看起来比等待第一个div完全隐藏然后显示第二个div更好。你能为你的答案做一个小提琴吗？你能根据我的需要做一个小提琴以便我检查吗？@NewUser你可以自己将代码粘贴到JSFIDLE中。

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