title: "swinging" action on text using css and jquery
body: <p>I'm trying to emulate text "hanging" off a bar and swinging when hovered over. Here's the JSfiddle for the code that I've currently got: <a href="http://jsfiddle.net/VRTAf/" rel="nofollow">http://jsfiddle.net/VRTAf/</a>. As you can see, there is no change in the rotation on hover. What am I doing wrong?</p>
  
  <p>Here's my code.</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"&gt;&lt;a href="#home" class="scrollPage"&gt;home&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="logo-about"&gt;&lt;a href="#about" class="scrollPage"&gt;about us&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="logo-range"&gt;&lt;a href="#range" class="scrollPage"&gt;our range&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="logo-contact"&gt;&lt;a href="#contact" class="scrollPage"&gt;contact us&lt;/a&gt;&lt;/li&gt;
                          &lt;li id="logo-blog"&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>#chandelier nav ul li {
      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>$('#chandelier nav ul li').hover(
  function () {
      $(this).addClass('swing1');
      $(this).addClass('swing2');
      $(this).addClass('swing3');
      $(this).addClass('swing4');
      $(this).addClass('swing5');
  },
  function () {
      $(this).removeClass('swing5');
  }
  );
  </code></pre>