jQuery know first transition has been done then make the 2nd one

Question

In Jquery I am doing a small animation. In that I have taken two divs. So basically the logic is like this when mouse will be hovered it will show one hidden div with transition. The same concept goes for the 2nd div. But my problem is when I am doing hover on 1st div its showing the hidden div in transition. But when I am doing hover on another div the first hidden is hiding and the 2nd hidden div is showing in the 2nd div. So I want that when I will hover on the 2nd div then the 1st hidden div should hide first then the 2nd hidden div will be shown.

Here is my code so far

<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>

My css so far

#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;   
}

and js code is like this

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

Here is the fiddle link

So can some one tell me how to make one transition complete after that another should be start or How can I check the first animation has been done so that the 2nd will be start? Any help and suggestions will be really appreciable. Thanks

Answer 1

You can take advantage of the transitioned event with jQuery, to capture when the transition has ended.

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');
    }
}); 

Vendor prefixes added for full compatibility, including two for Opera

You can see the code in action in this fiddle I prepared. It can be improved (if you move the mouse too much, the two hidden divs may show up until you hover again) but it should give you a nice head-start.

Answer 2

A quick solution to your problem would be to use a delay of 700ms to match the 0.7s in your transition like so:

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

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

This is not an elegant solution, but one nonetheless.

The other option would be to use the transition events as mentioned before and here:

Callback on CSS transition