Here's my 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:

/

Here's my 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:

http://jsfiddle/2tujd/

• javascript
• jquery

• 2 Try the mouseenter event – Ian Commented Apr 16, 2013 at 16:59
• 3 And try mouseleave event – Dom Commented Apr 16, 2013 at 16:59
• 1 you are having bubbling issues, since your mouseover handler introduces a new div that will then fire another mouseover. – iGanja Commented Apr 16, 2013 at 17:01

3 Answers 3

Try mouseenter and mouseleave instead: http://jsfiddle/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:

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. This can trigger the bound mouseout handler at inopportune times.

Edit: Add .stop() inside mouseleave to make sure any current animation is stopped prior to setting the margin-left.

Try this, using stop too:

DEMO

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

http://jsfiddle/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")
  });
});