javascript - jQuery/javascript によるオブジェクト位置アニメーション

Question

div (矢印のイメージ) をアニメーション化して、ページの中央に表示し、必要なオブジェクトをポイントして (その方向に回転させ)、その方向に移動する方法があるかどうか疑問に思っていました。何かがどこにあるかを示すようなもの。

jQuery はそのようなアニメーションに対応していますか、それとも他のライブラリを調べる必要がありますか?

Answer 1

中央に配置する方法: jQuery を使用して DIV を画面の中央に配置する

回転方法: jQuery で Div 要素を回転する

シンプルな形なのでラファエリスがおすすめです。これは、ほとんどのブラウザー (IE 6 を含む) で機能します。

Answer 2

はい、jqueryはそのようなタイプのアニメーションを提供できます.animate()。jqueryのメソッドでアニメーションを作成できます。http://docs.jquery.com/Effects/animate

矢印が移動するコード(目的の位置) をその.animateメソッドに入れます。例えば。.animateメソッドで使用する

$('#arrow').css({
 '-moz-transform':'rotate(80deg)',
 '-webkit-transform':'rotate(80deg)',
 '-o-transform':'rotate(80deg)',
 '-ms-transform':'rotate(80deg)'
});

回転に使用できる例があります。

ライブ ローテーションとその他の CSS デモ ブリリアン http://css3please.com/

http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html