要素を回転させる

jQueryのanimateメソッドを使って要素を回転させてみるプログラム。

サンプルデータ

$('#box1').animate(
	{'z-index': 1},//z-indexを0から1に変更する
	{
		duration: 1000, //アニメーションの時間
		//ステップ中の処理
		//引数num：処理途中の変化している値
		step: function (num) {
			//処理途中の値を使ってちょっとずつ回転させる
			$(this).css({
				transform: 'rotate(' + (num * 360) + 'deg)'
			});
			//デバッグ用にnumを出力
			$('#box2').html(num);
		},
		//完了時の処理
		//次回のことを考えz-indexを1から0に戻す
		complete: function () {
			$('#box1').css('z-index', 0);
		}
	}
);

step時関数内の「transform: ‘rotate(‘ + (num * 360) + ‘deg)’」の「360」を「720」にすれば2回転になるので任意で数値を変える。

animateメソッド

.animate( properties [, duration] [, easing] [, complete] )
.animate( properties, options )

animateメソッドは2種類の設定方法があるが今回は下の「.animate( properties, options )」を使用。