
要素を回転させる
公開日:2014年03月30日
更新日:2014年04月02日
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 |
|
同じカテゴリーのコンテンツ