3

animate()ポインターが DIV の上にあるときに、DIV タグを左にアニメーション化するために使用しています。ポインターが DIV タグを離れると、アニメーションで元の位置に戻ります。ここでの問題は、アニメーションが DIV タグをマウスオーバーで左に 50 ピクセル移動し、マウスを離すと右に 50 ピクセル移動することです。

これにより、アニメーションが完了していなくても、DIV が 50 ピクセル右に移動します。

$('body').on('mouseenter', '.image-photo-previous', function() {
    $(this).animate({marginLeft: '-=50px'}, 300, 'swing');
});

$('body').on('mouseleave', '.image-photo-previous', function() {
    $(this).animate({marginLeft: '+=50px'}, {queue: false}, 300, 'swing');
});

http://jsfiddle.net/edgren/CubZy/

マウスを離したときにアニメーションが完了していない場合でも、DIV タグを元の位置に戻すにはどうすればよいですか?

4

5 に答える 5

4

(JS なしで!) CSS3 を使用して実行できますtransition。

DEMO (CSS only)

.image-photo-previous {
    background-color: #222222;
    height: 100px;
    width: 200px;
    transition: 0.3s;         /* Transition! */
}
.image-photo-previous:hover{
    margin-left: -50px;
}

jQuery の使用:

LIVE DEMO

$(".image-photo-previous").on('mouseenter mouseleave', function( e ) {
    $(this).stop().animate({marginLeft: e.type=="mouseenter"?-50:0}, 300);
});

この.stop()方法は、いくつかの醜いアニメーションの蓄積を防ぎ、少しTernary Operator (?:)でも正しい方向に進んでいます。

+=あなたの例は、現在のDIVスタイルに追加されたために（終了していないアニメーションに）いくつかの新しく追加されたマージン計算をいじっていた新しいイベントでのニーズの原因に適合せず、-=特に高速なマウスの動きで要素の位置が正しくありません。stop()その動作をクリアし、必要なのは位置を厳密に定義することだけです:-50そして0それらを現在のイベントにバインドします。

于 2013-04-21T22:45:11.193 に答える
2

これを試して：

$(document).ready(function() {

    $('body').on('mouseenter', '.image-photo-previous', function() {
        $(this).stop(true,true).animate({marginLeft: '-=50px'}, 300, 'swing');
    });

    $('body').on('mouseleave', '.image-photo-previous', function() {
        $(this).stop(true,true).animate({marginLeft: '+=50px'}, {queue: false}, 300, 'swing');
    });

});

.stop() の詳細: http://api.jquery.com/stop/

于 2013-04-21T22:42:38.607 に答える
0

jsFiddle Demo

アニメーションが中断されないようにする場合は、jquery にそのfxキューでアニメーションを管理させる必要があります。ここにしないことを明示的に伝えます：

{queue: false}

したがって、これを次のように変更する必要があります。

$(this).animate({marginLeft: '+=50px'}, {queue: true}, 300, 'swing');

そして、アニメーションがキューから出て次のアニメーションを開始するまで待機します。

于 2013-04-21T22:41:39.570 に答える
0

You can reset marginLeft to its original value or '' if there was no original value.

Also, call $(this).stop(); in your mouseleave to cancel the previous animation.

$(document).ready(function() {
    $('body').on('mouseenter', '.image-photo-previous', function() {
        startMargin = $(this).css('marginLeft');
        $(this).animate({marginLeft: '-=50px'}, 300, 'swing');
    });

    $('body').on('mouseleave', '.image-photo-previous', function() {
        $(this).stop();
        $(this).animate({marginLeft: ''}, {queue: false}, 300, 'swing');
    });
});

fiddle: http://jsfiddle.net/ExUzJ/2/

Let me know if that is what you were looking for or not.

于 2013-04-21T22:46:53.417 に答える
0

Reference: How do I find out with jQuery if an element is being animated?

you can use the following code to determine whether an animation is being applied or not

if( $('.image-photo-previous').is(':animated') ) {...}

If so, you can use the callback function in the link above to wait (using setTimeOut) or calculate the expected margin pixels required to get the div back to its original postion

于 2013-04-21T22:47:13.933 に答える