要素を回転させる
公開日: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のキーと値をオブジェクトで指定 |
| options | duration 型：Number,String 初期値：400 アニメーションの時間をミリ秒かキーワードで指定 easing 型：String 初期値：swing イージングの種類を指定 step 型：Function(Number now, Tween tween) アニメーションで変更している途中に呼び出され続ける関数。 処理途中の値やトゥイーンを引数で取得可能。 complete 型：Function() アニメーション完了時に呼び出される関数 |
同じカテゴリーのコンテンツ
