javascript - jQuery mouseover 在 mouseout 上运行

Question

这是我的 jQuery

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

当我将鼠标悬停时，它工作得很好，当我鼠标悬停时，它不会重置，它会重新播放鼠标悬停......这是问题的一个问题，所以你可以明白我的意思：

http://jsfiddle.net/2tujd/

Answer 1

尝试改为：httpmouseenter : //jsfiddle.net/2tujd/11/mouseleave

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

在jQuery 网站上，它说关于 usingmouseout和 simliarly for mouseover：

由于事件冒泡，这种事件类型会引起很多麻烦。例如，在本例中，当鼠标指针移出 Inner 元素时，将向该元素发送一个 mouseout 事件，然后滴流到 Outer。这可能会在不合时宜的时候触发绑定的 mouseout 处理程序。

编辑：添加.stop()内部mouseleave以确保在设置margin-left.

Answer 2

试试这个，stop也使用：

演示

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

Answer 3

http://jsfiddle.net/2tujd/10/

我认为最好只使用一个处理程序。所以你对异步方法没有任何冒泡或问题。

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