Javascript 当我将鼠标悬停在按钮中的上时，按钮会发疯（使用jQuery动画）

我有一个按钮，我想改变它的宽度，当我把鼠标悬停在它上面的时候，还有一些其他的效果，不管怎样，当我把鼠标悬停在它上面的时候，按钮开始发疯，它开始变宽，然后塌陷，即使我没有用鼠标把它移出。代码如下：

$body.readyfunction{ var w=$.smthnbox.csswidth； $.smthnbox.mouseoverfunction{ $.smthnbox.animate{ 宽度：200px },400; }; $.smthnbox.mouseoutfunction{ $.smthnbox.animate{ 宽度：w },400; }; }; *{ 保证金：0； 填充：0； 框大小：边框框； } .smthnbox{ 宽度：30px； 高度：30px； 背景：蓝色； 保证金：20px自动； 显示：块； } 欢迎光临！

---

需要在下一个动画之前停止上一个未完成的动画

$(".smthnbox").stop().animate({...});

问题是.mouseout也会在上触发，这是与.smthnbox不同的元素。为了防止.mouseout逻辑也应用于.smthnbox中包含的元素，您需要将事件传递给.mouseout，然后检查哪个元素具有该事件。如果它不是目标元素，请防止该行为。这可以通过以下方式实现：

$(".smthnbox").mouseout(function(event) {
  var e = event.toElement || event.relatedTarget;
  if (e.parentNode == this || e == this) {
    return;
  }
  // Intended functionality
}

这只会在用户的鼠标真正离开元素时触发.mouseout：

$body.readyfunction{ var w=$.smthnbox.csswidth； $.smthnbox.mouseoverfunction{ $.smthnbox.animate{ 宽度：200px }, 400; }; $.smthnbox.mouseoutfunctionevent{ var e=event.toElement | | event.relatedTarget； 如果e.parentNode==this | | e==this{ 回来 } $.smthnbox.animate{ 宽度：w }, 400; }; }; * { 保证金：0； 填充：0； 框大小：边框框； } .smthnbox{ 宽度：30px； 高度：30px； 背景：蓝色； 保证金：20px自动； 显示：块； } 欢迎光临！

---

使用mouseenter和mouseleave事件侦听器

$function{ 变量框=$.smthnbox var w=box.csswidth； box.onmouseinter，函数{ $this.stop.animate{ 宽度：200px },400; }.离开，离开{ $this.stop.animate{ 宽度：w },400; }; }; *{ 保证金：0； 填充：0； 框大小：边框框； } .smthnbox{ 宽度：30px； 高度：30px； 背景：蓝色； 保证金：20px自动； 显示：块； } 欢迎光临！

---

它工作了，谢谢，但我不明白，当你停止播放时，它完成了动画，不让其他动画播放？如果你能详细说明一下，那会很棒，因为动画有一个持续时间，当你叠加jQuery动画时，需要在执行下一个之前完成一个。停止只是终止当前动画执行，不管是否完成，并将元素保持在该状态，下一个动画将开始执行。在您的示例中，因为鼠标事件绑定到.smthnbox，所以当您将鼠标移到元素上时，会触发.smthnbox的mouseout事件，从而堆叠动画。当你鼠标离开时，smthnbox的鼠标也会被烧掉。哦，好的，太好了，谢谢！还有一件事，有没有更顺利的办法？因为当我不小心停在i元素上时，它会停止，我能把i弄到一边吗？黑曜石时代回答了这个问题：mouseenter和mouseleave