2012-03-27 12 views
0

私が達成したいのは、divを停止してもう一度アニメーションを開始するのを待つときにクリックするまで、divを上下に動かすことです。アニメーションのdivよりjqueryの複数のクリックイベント

http://jsfiddle.net/WwJRD/

これは私のdiv要素をアニメーション機能である:

function upAndDown(element,x) { 

    $(element).animate({'top':'+='+x+'px'}, 'slow') 
    .animate({'top':'-='+x+'px'}, 'slow',function(){upAndDown(element,x)}); 
}; 

$('.clickThis').click(function(){ 
    upAndDown('.moveThis',50); 
}); 

は、私は本当に私が欲しいものを手に入れる方法を知ってはいけません!

おかげ

答えて

1

あなたが複数のキューに入れられたアニメーションやコールバックを持っているので、これは、実際には少しトリッキーです。

ちょうどstopを呼び出し、その後upAndDownを呼び出すと、現在の位置からアニメーションが開始されます。つまり、ページを散発的に移動する可能性があります。 stop()コールでjumpToEndをコールすることはできません。これはコールバックを依然として呼び出すためです。

オブジェクトを動かす(適切に)ときには、クラスmovingを追加してこの問題を修正しました。これは、アニメーションを維持するかどうかを決定するコールバックで使用されます。

あなたはこれで終わる:それはサイクルを終了するまでさて、これはアニメーションを保持

http://jsfiddle.net/EkpNK/

。あなたが所定の位置に停止し、あなたが、それを中断したところから再開したい場合は

http://jsfiddle.net/EkpNK/1/

:あなたはそれをすぐに停止したい場合は、両方のアニメーションを停止し、元の場所に戻るには二回.stop(false, true)を呼び出すことができますいくつかの追加コードが必要になります。

0

私のソリューションは、ジェフBさんに非常に似ていますが、(IMO)少しクリーナーを物事を保持し、代わりにクラスを追加/削除の「アニメーション」フラグを格納するjQuery.data()関数を使用しています。

http://jsfiddle.net/HnK98/

関連する問題