2012-02-23 8 views
12

position({of:,my:,at:})を使用して現在の位置から中心にどのようにアニメーションできますか? プロセスを自動化する方法はありますか、または手動でCSSプロパティをアニメーション化する必要はありますか?jQueryの位置をアニメーション化する

+0

関数http://api.jquery.com/animate/を参照すると、CSS値のセットを指定することができ、jqueryがトランジションを行います。 – Yogu

答えて

1

あなたは.animate()を見ましたか?

編集:これで、あなたが少し良くなっていることを理解したので、here is a jQuery plugin that I wrote to do this very thing

Here's a quick jsFiddle as an example

オプションを設定可能なオブジェクトにしました。例:

$('#clickme').click(function() { 
    $('#blah').align({speed:1000,y:false}); 
});​ 

EDIT:それはもはや必要とただ雑然とものまであるので、他のコードを取り出すません。私の新しいコードを整理する。オフセットの親の位置付けの問題を修正しました。最新バージョンのソースを使用して、gitリポジトリとjsFiddleへのリンクを追加しました。

+0

私はそのことについて知っていますが、divの幅 - 高さの除算を2などで計算する必要があります。アニメーションする方法があるかどうか疑問に思っていました。position({of:、my:、at: 、animate:slide})、または何かの並べ替え。 – localhost

+0

jsfiddle.net/MjsDc/8/これで解決しますが、ちょっと面倒です。私はポジション({of:、my:、at:})を持つソリューションを望んでいました。 – localhost

+0

@ localhost2 OK ...これは実際にはコードを書いています...クライアントサイトで使用していたjQuery拡張機能を中心としたオブジェクトでした...私がそれを掘り出すことができるかどうかを確認する必要があります... –

24

この回答は2月に戻ってきたかもしれませんが、今はもっと簡単な方法があります。

positionメソッドは、この目的のためだけにusing引数をとります。たとえば、

$(div).position({ 
    at: "left+50% top+50%", 
    of: $(div).parent(), 
    using: function(css, calc) { 
     $(this).animate(css, 200, "linear"); 
    } 
}); 
+0

おかげで、ありがとう。 – localhost

関連する問題