title: JQuery .hover() and .bind() trying to control animation behaviour
body: <p>I'm trying to control how an animation behaves. On my NAV menu, everytime i hover over a Li element, it should trigger the animation. The animation makes it rotate and do some more fancy stuff. The problem is, the Li's width/height change during the animation, so if when the animation is ocurring  you move the mouse pointer, the animation stops and starts again. So what i'm trying to achieve here is to force animation to play until the end.</p>
  
  <p>Another point is that the Li element retains the attributes it gets at the end of the animation, thanks to using "forwards". And I would like to be that way until you move the mouse out of the element.</p>
  
  <p>so this is what i have so far, but it isn't working as expected:</p>
  
  <pre><code>$("li").hover(function(e) {
    $(e.target).addClass("liIsHovered");
    $(e.target).bind("webkitAnimationEnd mozAnimationEnd animationEnd", function() {
      if ($(e.target).is(":hover")) {
  
      } else {
        $(e.target).removeClass("liIsHovered");
      }
    });
  }, function(e) {
    if ($(e.target).is(":animated")) {
  
    } else {
      $(e.target).removeClass("liIsHovered");
    }
  });
  </code></pre>
  
  <p>But it's not behaving as I want it to. If I move the mouse out of the element the animation stops anyway when it's animating.</p>
  
  <p>Also tried moving the bind() event handler out of the hover() handler, but behaves the same way...</p>
  
  <pre><code>$("li").hover(function(e) {
    $(e.target).addClass("liIsHovered");
  }, function(e) {
    if ($(e.target).is(":animated")) {
  
    } else {
      $(e.target).removeClass("liIsHovered");
    }
  });
  
  $("li").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(e) {
    if ($(e.target).is(":hover")) {
  
    } else {
      $(e.target).removeClass("liIsHovered");
    }
  });
  </code></pre>