0

私は非常にクールなjqueryプラグインを書いていますが、この最後のビットに引っかかっていることに気づきました。基本的に、mouseenter と mouseleave で要素をアニメーション化しています。この jsbinで良い例を見つけることができますが、移動ボタンのアニメーションが終了する前に戻るボタンにカーソルを合わせると、画像が画面外に移動します。要素の開始位置がわかっていると仮定すると、アニメーションが早期に停止された場合でも、要素が元の位置を超えてアニメーション化されないようにする方法はありますか? .stop()アニメーションに使用する必要があります。たぶん、これは私が見落としている簡単なことです。

jsbin リンクからのコード スニペット:

// Start animation
$( "#go" ).mouseenter(function() {
    $( ".block" ).stop().animate({ left: "+=100px" }, 2000 );
});
// Start animation in the opposite direction
$( "#back" ).mouseenter(function() {
    $( ".block" ).stop().animate({ left: "-=100px" }, 2000 );
});
4

1 に答える 1

1

stopアニメーションを残す方法を制御する引数を受け入れます。を使用する.stop(true, true)と、アニメーションを停止するときにアニメーションを最後までジャンプできます。

$( ".block" ).stop(true, true).animate({ left: "+=100px" }, 2000 );

……でも、ちょっとむずかしいかも。

または、要素の開始位置がわかっていると言うように、そこに戻すだけです。

$( ".block" ).stop().css(originalPosition).animate({ left: "+=100px" }, 2000 );

... whereoriginalPositionはプロパティを持つオブジェクトでleftありtop、おそらく と です。ユースケースの詳細にもよりますが、それも少し不安定かもしれません。

または、再び、元の位置があるので、その位置に戻す (または、その位置 + 100px に進む) ことができます。

于 2013-09-23T16:31:19.823 に答える