jQuery鼠标悬停在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

尝试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网站上,它说关于使用mouseout和simliarly mouseover:

由于事件冒泡,此事件类型可能会导致许多麻烦.例如,当鼠标指针在此示例中移出Inner元素时,将向其发送mouseout事件,然后逐渐向外传递.这可以在不合适的时间触发绑定的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");
});