Question

这是我的jQuery

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

当我鼠标移动时，它工作得非常好，当我鼠标移除时，它不会重置，它重新播放鼠标悬停...这里是问题的小提示，所以你可以看到我的意思：

http://jsfiddle.net/2tujd/

Answer 1

请尝试mouseenter和mouseleave：http://jsfiddle.net/2tujd/11/

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

在jQuery site上，它说明了mouseout使用mouseover和.stop()：

此事件类型可能会因事件冒泡而导致许多令人头疼的问题。例如，当鼠标指针在此示例中移出Inner元素时，将向其发送mouseout事件，然后逐渐向外传递。这可以在不合适的时间触发绑定的mouseout处理程序。

修改：在mouseleave内添加margin-left，以确保在设置{{1}}之前停止当前任何动画。

Answer 2

尝试使用stop：

DEMO

$('#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")
  });
});

jQuery鼠标悬停在mouseout上运行

3 个答案: