jQueryでCSS3の回転のアニメーションをプラグインなしでやってみる

今日はjQueryの小ネタを紹介します。

jQueryのanimateメソッドはwidthやmarginなど、数値を直接変更させることはできますが、CSS3のtransform:rotateなどは変更できないようになっています。しかし、jQueryのanimateメソッドはjQueryオブジェクトのCSSプロパティだけでなく、JavaScriptのオブジェクトの変化もアニメーションさせることができます。今回はそれをつかって、画像をanimateメソッドを使って回転させる方法を紹介します。

まずはデモを紹介します。

jQueryでCSS3の回転のアニメーションをプラグインなしでやってみる

HTMLは以下の通り

CSSはこんな感じ

そして、JavaScriptのコードは以下の通り

詳しく解説しなくても、直感でわかるかと思いますが、要するにdegという変数を0から360まで変化させます。変化中ではprogressというオブジェクトに関数を割り当てます。その関数内で、CSSメソッドを使って、transform:rotate(XXXdeg);をやるという処理です。

この、animateメソッドでjQueryオブジェクトを変化させるという方法は、結構いろいろな場面で使えそうですね。今回のようにCSS3の新しいプロパティを使うだけでなく、アイデアしだいでは、ちょっと凝った動きなんかもできそう。ぜひお試しください!

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project


この記事をかいた人

ドレッド Webクリエイター、ライター

Webクリエイター&フリーライターのドレッドのブログです。インターネットの力で自由に生きている私のライフログやちょっとしたメモを記録しています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! note始めました!

jQuery | Posted on 2016/01/10 18:04

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。