6

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.net/2tujd/

4

3 に答える 3

9

代わりに試してみてくださいmouseenter：http://jsfiddle.net/2tujd/11/mouseleave

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

jQueryサイトでは、mouseoutおよび同様に forを使用することについて次のように述べていますmouseover。

このイベント タイプは、イベント バブリングが原因で多くの問題を引き起こす可能性があります。たとえば、この例では、マウス ポインターが Inner 要素の外に移動すると、mouseout イベントがそこに送信され、その後 Outer まで細流します。これにより、不適切なタイミングでバインドされた mouseout ハンドラーがトリガーされる可能性があります。

編集:を設定する前に、現在のアニメーションが停止していることを確認するために.stop()内部に追加します。mouseleavemargin-left

于 2013-04-16T17:00:09.233 に答える
4

stop以下も使用して、これを試してください。

デモ

$('#samsungShine').mouseenter(function() {
    $('#samsungShineImage').animate({"margin-left":"304px"}, 700);
}).mouseleave(function(){
    $('#samsungShineImage').stop().css("margin-left", "-304px");
});
于 2013-04-16T17:01:08.957 に答える