title: transitionend event doesn't fire when my animation finishes
body: <p>I'm trying to use jQuery to fire an event when a css animation finishes and it's largely working, but for some reason the <code>transitionend</code> event doesn't get called until I move my mouse off of the object in question.</p>
  
  <p>Here's the method:</p>
  
  <pre><code>function replaceWithSearch(){
      var searchWrapper = constructSearchBox("");
      $(this).addClass("animated fadeOut"); // css animation
      $(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
      function (e){
          console.log(e);
          $(this).parent().replaceWith(searchWrapper);
          if (document.URL.indexOf("search?s=") == -1){
              document.getElementById("searchbox").focus();
          }
      });
  }
  </code></pre>
  
  <p>It mostly seems to work with the exception that after the first css animation finishes, if I keep my mouse on the <code>$(this)</code> element the <code>transitionend</code> event won't fire. As soon as I move my mouse off of the element everything works perfectly.</p>
  
  <p>I'm really at a loss with this one, any ideas? I'm using the css classes in <a href="https://github.com/daneden/animate.css" rel="nofollow">animate.css</a>.</p>