title: how to wait for css transition to finish before applying next class
body: <p>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: <a href="http://jsfiddle.net/hari_shanx/VRTAf/7/" rel="noreferrer">http://jsfiddle.net/hari_shanx/VRTAf/7/</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="chandelier"&gt;
      &lt;nav&gt;
          &lt;ul id="chandelier-list"&gt;
              &lt;li id="logo-home" class="swing"&gt;&lt;a href="#home" class="scrollPage"&gt;home&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li id="logo-about" class="swing"&gt;&lt;a href="#about" class="scrollPage"&gt;about us&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li id="logo-range" class="swing"&gt;&lt;a href="#range" class="scrollPage"&gt;our range&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li id="logo-contact" class="swing"&gt;&lt;a href="#contact" class="scrollPage"&gt;contact us&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;li id="logo-blog" class="swing"&gt;&lt;a href="#blog" class="scrollPage"&gt;blog&lt;/a&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>$('.swing').hover(
  
  function () {
      $(this).addClass('swing1');
      $(this).addClass('swing2');
  },
  
  function () {
      $(this).removeClass('swing1');
      $(this).removeClass('swing2');
  });
  </code></pre>