jquery - 带有屏幕截图的带有淡入淡出时间问题的jQuery悬停

Question

当悬停在地图子弹上时，我正在淡出，改变精灵的背景位置，然后淡入。但是当这个动作在几个子弹上快速完成时，我遇到了一致性问题。

想法如何在不必为每个子弹制作特定事件的情况下进行调整？

$("#map a").hover(
  function () {
    $(this).fadeOut(200, function () {
      $(this).css('backgroundPosition', '0 0');
      $(this).fadeIn(200);
    });
  },
  function () {
    $(this).fadeOut(200, function () {
      $(this).css('backgroundPosition', '');
      $(this).fadeIn(200);
    });
  }
);

感谢脑力！

...但我想我只是要删除这个功能，而不是一些花哨的工具提示，这些工具提示与褪色效果不太好。感谢您的光临！

Answer 1

在没有看到演示的情况下，我猜测您需要使用 .stop() 停止其他子弹以达到您想要的效果

$(this).stop(true, true).fadeOut(200, function () {
  $(this).css('backgroundPosition', '0 0');
  $(this).stop(true, true).fadeIn(200);
});

Answer 2

您可以使用布尔值来检查您当前是否正在制作动画。

animating = false;

$('.something').hover(function() {
    if(animating) {
        return;
    }
    animating = true;
    $('.other').fadeOut(200, function() {
        animating = false;
    });
});