javascript - JQuery .hover() 和 .bind() 试图控制动画行为

Question

我正在尝试控制动画的行为方式。在我的 NAV 菜单上，每次我将鼠标悬停在 Li 元素上时，它应该会触发动画。动画使它旋转并做一些更花哨的事情。问题是，Li 的宽度/高度在动画期间会发生变化，因此如果在动画发生时移动鼠标指针，动画会停止并重新开始。所以我在这里想要实现的是强制动画播放到最后。

另一点是，由于使用了“forwards”，Li 元素保留了它在动画结束时获得的属性。在您将鼠标移出元素之前，我希望保持这种状态。

这就是我目前所拥有的，但它没有按预期工作:

$("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");
  }
});

但它的行为并不如我所愿。如果我将鼠标移出元素，则动画在设置动画时无论如何都会停止。

还尝试将 bind() 事件处理程序移出 hover() 处理程序，但行为方式相同......

$("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");
  }
});

Answer 1

我解决了它，但我认为这不是实现此目的的正确方法，因此我将其标记为解决方法，而不是正确答案。如果有人可以帮助我并以实现此行为的“良好实践”方式打击我，请这样做。

这就是我实现预期行为的方式。同样，这只是一种解决方法:

$("li").mouseenter(function (e) {
    $("li").removeClass("liIsHovered");
    $(e.target).addClass("liIsHovered");
    $(e.target).one("bind", "webkitAnimationEnd mozAnimationEnd animationEnd", function () {
        if ($(e.target).is(":hover")) {
        } else {
            $(e.target).removeClass("liIsHovered");
        }
    });
});

$("ul").mouseleave(function (e) {
    $("li").removeClass("liIsHovered");
});