仅动画一次

Question

我使用jQuery .animate（）移动一次项目，但它似乎以100px的增量多次移动。是因为鼠标悬停？

var ww = $(window).width();

$(document).on('mouseover', '#myTarget', function () {
     var dp = $(this).offset().left;

     if ((ww - dp) < 150) {
         $('.myDiv.active').animate({left:'-=100px'},500);
     }
}); 

Answer 1

鼠标悬停在目标上时，会重复发送鼠标悬停事件。您可能需要mouseenter和mouseleave

Answer 2

使用jquery.one

$(document).one('mouseover', '#myTarget', function () {
  var dp = $(this).offset().left;

  if ((ww - dp) < 150) {
     $('.myDiv.active').animate({left:'-=100px'},500);
  }
}); 

Answer 3

将其更改为 $(document).on('mouseenter', '#myTarget', function () { 会更好。每次鼠标进入或离开元素或其中一个子元素时，都会触发mouseover事件。 mouseenter不会发生这种情况。 example here显示了这一点。

请参阅this answer以获取类似问题以及所提供示例的来源。