Learning site for website creation

要素を回転させる

公開日:2014年03月30日

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 )」を使用。

引数説明
propertiesアニメーションで変化させるCSSのキーと値をオブジェクトで指定
optionsduration
型:Number,String
初期値:400
アニメーションの時間をミリ秒かキーワードで指定

easing
型:String
初期値:swing
イージングの種類を指定

step
型:Function(Number now, Tween tween)
アニメーションで変更している途中に呼び出され続ける関数。
処理途中の値やトゥイーンを引数で取得可能。

complete
型:Function()
アニメーション完了時に呼び出される関数