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

在Jquery中，我正在做一个小动画。在这方面，我参加了两次潜水。所以基本上逻辑是这样的，当鼠标悬停时，它会显示一个带有转换的隐藏div。第二个div也有同样的概念。但我的问题是，当我在第一个div上悬停时，它会显示转换中隐藏的div。但是当我在另一个div上悬停时，第一个隐藏的div被隐藏起来，第二个隐藏的divs显示在第二个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');
    });

这是小提琴链接

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