how to wait for css transition to finish before applying next class

Question

I'm trying to get text to "swing", by applying a rotation transition one way, followed by a rotation the next way, when hovered over. However, it doesn't wait for the first transition to be completed so it looks like only the last transition is being applied. How can I force it to wait for the first transition to complete? JSfiddle: http://jsfiddle.net/hari_shanx/VRTAf/7/

HTML:

<div id="chandelier">     <nav>         <ul id="chandelier-list">             <li id="logo-home" class="swing"><a href="#home" class="scrollPage">home</a>              </li>             <li id="logo-about" class="swing"><a href="#about" class="scrollPage">about us</a>              </li>             <li id="logo-range" class="swing"><a href="#range" class="scrollPage">our range</a>              </li>             <li id="logo-contact" class="swing"><a href="#contact" class="scrollPage">contact us</a>              </li>             <li id="logo-blog" class="swing"><a href="#blog" class="scrollPage">blog</a>              </li>         </ul>     </nav> </div> 

CSS:

.swing {     position: absolute;     -webkit-transform: rotate(-90deg);     -moz-transform: rotate(-90deg);     -o-transform: rotate(-90deg);     transform: rotate(-90deg);     writing-mode: lr-tb;     -webkit-transform-origin: right top;     -moz-transform-origin: right top;     -ms-transform-origin: right top;     -o-transform-origin: right top;     transform-origin: right top;     font-size: 18px;     -webkit-transition: all 0.2s ease-in-out;     -moz-transition: all 0.2s ease-in-out;     -o-transition: all 0.2s ease-in-out;     transition: all 0.2s ease-in-out; } .swing1 {     -webkit-transform: rotate(-80deg);     -moz-transform: rotate(-80deg);     -o-transform: rotate(-80deg);     transform: rotate(-80deg); } .swing2 {     -webkit-transform: rotate(-97deg);     -moz-transform: rotate(-97deg);     -o-transform: rotate(-97deg);     transform: rotate(-97deg); } .swing3 {     -webkit-transform: rotate(-85deg);     -moz-transform: rotate(-85deg);     -o-transform: rotate(-85deg);     transform: rotate(-85deg); } .swing4 {     -webkit-transform: rotate(-92deg);     -moz-transform: rotate(-92deg);     -o-transform: rotate(-92deg);     transform: rotate(-92deg); } .swing5 {     -webkit-transform: rotate(-89deg);     -moz-transform: rotate(-89deg);     -o-transform: rotate(-89deg);     transform: rotate(-89deg); } #logo-home {     top: 0;     left: -32px; } #logo-about {     top: 0;     left: -17px; } #logo-range {     top: 0;     left: 14px; } #logo-contact {     top: 0;     left: 48px; } #logo-blog {     top: 0;     left: 135px; } #chandelier nav ul li a {     text-decoration: none; } #chandelier nav ul {     list-style-type: none; } 

JS:

$('.swing').hover(  function () {     $(this).addClass('swing1');     $(this).addClass('swing2'); },  function () {     $(this).removeClass('swing1');     $(this).removeClass('swing2'); }); 

Answer 1

Each browser has its own event that you can use to detect transition end, just bind like this :

$(".yourClass").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',      function() {          //doSomething     });