Javascript jquerymouseover在mouseout上运行

这是我的jQuery

$('#samsungShine').mouseover(function () {
    $('#samsungShineImage').animate({
        "margin-left": "304px"
    }, 700);
}).mouseout(function () {
    $('#samsungShineImage').css("margin-left", "-304px");
});

当我鼠标悬停时，它工作得非常好，当我鼠标悬停时，它不会重置，它会重新播放鼠标悬停。。。下面是一个问题的小部分，你可以理解我的意思：

---

尝试使用

mouseenter

和

mouseleave

：

在上，它说明了如何使用

mouseout

，以及如何使用

mouseover

：

由于事件冒泡，此事件类型可能会导致许多问题。例如，在本例中，当鼠标指针移出内部元素时，将向该元素发送一个mouseout事件，然后向上滴至外部元素。这可能在不适当的时候触发绑定的mouseout处理程序

---

编辑：在

mouseleave

中添加

.stop（）

以确保在设置

左边距之前停止任何当前动画

尝试此操作，同时使用

停止

：

我认为最好只使用一个处理器。因此，异步方法没有任何冒泡或问题

$('#samsungShine').mouseenter(function () {
    $('#samsungShineImage').animate({
        "margin-left": "304px"
    }, 700, function() {
  $('#samsungShineImage').css("margin-left", "-304px")
  });
});

---

尝试

mouseenter

event并尝试

mouseleave

event您遇到冒泡问题，因为您的mouseover处理程序引入了一个新的div，然后将触发另一个mouseover。OP希望动画在MOUSEOUT/mouseleave上重置，而不是在动画完成时重置。这并不意味着这是最好的方法？如果可以使用一个处理程序，为什么要使用两个处理程序？另外，当动画处于+120或其他状态时，您不想使用左边距-304。@S.Visser这是“最佳”方式，因为这是OP想要的。OP希望光标进入元素时发生一些事情（设置其

左边距

的动画），然后在光标离开元素时执行一些不同的操作（重置其

左边距

）。你不能仅仅假设动画完成后它应该被重置。这是最好的答案，因为它会立即在onleave上取消动画。@iGanja如果在上使用

，它可能会“更好”，但如果它有帮助的话，这是有争议的。我只是喜欢直言不讳。但是你是对的，
stop
的使用非常重要。每个人都喜欢跳上.on的潮流（这不是双关语），但是如果我们只绑定一个元素，显式绑定就可以了，并且运行得更快。我不想提供。上，除非我们正在解决一个明显的多重约束情况。@iGanja我不明白你的意思。显式绑定是绑定事件处理程序的“长”方式。它们是在内部调用

的特殊情况，因此它们在技术上比较慢（尽管“慢”的程度可以忽略不计……但它们并不是“快”）。他们所做的与上的

没有什么不同。另外，显式绑定需要链接多个事件（这是问题/答案所要求的），而
on
可以在一次调用中完成，可能效率更高。@iGanja-Ian是正确的，alias use on（）在内部使用，so on（）在您的JSFIDLE中仍然更快，如果我重复快速地输入/离开图像，动画将不再有效，这就是为什么你应该使用stoptoo@roasted谢谢你的提示。
$('#samsungShine').mouseenter(function() {
    $('#samsungShineImage').animate({"margin-left":"304px"}, 700);
}).mouseleave(function(){
    $('#samsungShineImage').stop().css("margin-left", "-304px");
});

$('#samsungShine').mouseenter(function () {
    $('#samsungShineImage').animate({
        "margin-left": "304px"
    }, 700, function() {
  $('#samsungShineImage').css("margin-left", "-304px")
  });
});