jquery - FadeIn 卡在 jquery 中

Question

当我使用此代码时

$("#mainMenu .home").hover(
  function () {
      $("#mainMenuHoverTitle").fadeIn("fast");
      $("#mainMenuHoverTitle").css("background-position", "440px 600px");
      $("#mainMenuHoverTitle").text("Naslovna");
  },
  function () {
      $("#mainMenuHoverTitle").hide();
  }
);
$("#mainMenu .alarm").hover(
  function () {
      $("#mainMenuHoverTitle").fadeIn("fast");
      $("#mainMenuHoverTitle").css("background-position", "440px 583px");
      $("#mainMenuHoverTitle").text("Alarm (9)");
  },
  function () {
      $("#mainMenuHoverTitle").hide();
  }
);

并用鼠标快速移动它卡住的菜单。如何正确地做到这一点？

Answer 1

您应该.stop()在任何动画之前添加以取消当前动画。

$("#mainMenu .home").hover(
  function () {
      $("#mainMenuHoverTitle").stop().fadeIn("fast");
      $("#mainMenuHoverTitle").css("background-position", "440px 600px");
      $("#mainMenuHoverTitle").text("Naslovna");
  },
  function () {
      $("#mainMenuHoverTitle").stop().hide();
  }
);
$("#mainMenu .alarm").hover(
  function () {
      $("#mainMenuHoverTitle").stop().fadeIn("fast");
      $("#mainMenuHoverTitle").css("background-position", "440px 583px");
      $("#mainMenuHoverTitle").text("Alarm (9)");
  },
  function () {
      $("#mainMenuHoverTitle").stop().hide();
  }
);