[英]jQuery mouseover runs on mouseout
Here's my jQuery 这是我的jQuery
$('#samsungShine').mouseover(function () {
$('#samsungShineImage').animate({
"margin-left": "304px"
}, 700);
}).mouseout(function () {
$('#samsungShineImage').css("margin-left", "-304px");
});
When I mouseover, it works excellent, when I mouseout, it doesn't reset, it re-plays the mouseover... here is a fiddle of the problem so you can see what I mean: 当我鼠标移动时,它工作得非常好,当我鼠标移除时,它不会重置,它重新播放鼠标悬停...这里是问题的小提琴,所以你可以看到我的意思:
Try mouseenter
and mouseleave
instead: http://jsfiddle.net/2tujd/11/ 尝试使用
mouseenter
和mouseleave
: http : //jsfiddle.net/2tujd/11/
$('#samsungShine').mouseenter(function () {
$('#samsungShineImage').animate({
"margin-left": "304px"
}, 700);
}).mouseleave(function () {
$('#samsungShineImage').stop().css("margin-left", "-304px");
});
On the jQuery site , it says about using mouseout
and simliarly for mouseover
: 在jQuery网站上 ,它说关于使用
mouseout
和simliarly for mouseover
:
This event type can cause many headaches due to event bubbling.
由于事件冒泡,此事件类型可能会导致许多麻烦。 For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer.
例如,当鼠标指针在此示例中移出Inner元素时,将向其发送mouseout事件,然后逐渐向外传递。 This can trigger the bound mouseout handler at inopportune times.
这可以在不合适的时间触发绑定的mouseout处理程序。
Edit: Add .stop()
inside mouseleave
to make sure any current animation is stopped prior to setting the margin-left
. 编辑:在
mouseleave
添加.stop()
以确保在设置margin-left
之前停止任何当前动画。
http://jsfiddle.net/2tujd/10/ http://jsfiddle.net/2tujd/10/
I think its better to use just one handler. 我认为最好只使用一个处理程序。 So you dont have any bubbling or problems with asynchronous methods.
所以你没有任何冒泡或异步方法的问题。
$('#samsungShine').mouseenter(function () {
$('#samsungShineImage').animate({
"margin-left": "304px"
}, 700, function() {
$('#samsungShineImage').css("margin-left", "-304px")
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.