title: Reverse CSS3 transition
body: <p><a href="http://micheresources.com/html/j-crew-slider/" rel="nofollow">http://micheresources.com/html/j-crew-slider/</a></p>
  
  <p>I'm wondering how to reverse an animation? As you hover over each navigation item to the left, you'll notice how the black bar just pinches to the top left corner rather than slides left when you hover over the next item. How can I make it slide out similar to how it slid in?</p>
  
  <p>The black bar is an <code>&lt;a&gt;</code> tag that's appended to each navigation item when the <code>activeSlide</code> class is applied on hover, then removed at the next hover.</p>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function () {
      function activateItem(index) {
          $('#slideshow-nav').children('li').each(function (i) {
              var $item = $(this);
              if (i == index) {
                  if ($item.children('a').length == 0) {
                      $item.append('&lt;a href="#"&gt;' + titles[i] + '&lt;/a&gt;');
                  }
              } else {
                  $item.children('a').hide(400, function() {
                      $item.children('a').remove();
                  });
              }
          });
      }
  
      var titles = ["New Styles", "June PVE", "Double Hostess Rewards"];
      $("#slideshow").before("&lt;ul id='slideshow-nav'&gt;&lt;/ul&gt;")
      .cycle({
          fx:         "scrollVert",
          rev:            "scrollVert",
          speed:          600,
          timeout:        0,
          pagerEvent:     "mouseover",
          pager:          "#slideshow-nav",
          pagerAnchorBuilder: function (index) {
              return "&lt;li&gt;&lt;span&gt;" + titles[index] + "&lt;/span&gt;&lt;/li&gt;";
          },
          onPagerEvent: function (index) {
              activateItem(index);
          }
      });
      activateItem(0);
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#slideshow-nav li a {
      background-color: #000;
      width: 285px;
      margin-top: -1px;
      padding: 30px 10px;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      color: #fff;
      text-decoration: none;
      position: absolute;
      left: -285px;
      -webkit-transition: left 500ms ease;
      -moz-transition: left 500ms ease;
      -o-transition: left 500ms ease;
      transition: left 500ms ease;
  }
      #slideshow-nav li.activeSlide a { left: 0; }
  </code></pre>