IT

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

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

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

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

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

HTMLは以下の通り

<body>
	<p class="button">回転する!</p>
	<img class="img" src="koala.jpg" />
</body>

CSSはこんな感じ

<style>;
	body {
		padding:50px;
	}
	p.button {
		display: inline-block;
		border:1px solid #aaa;
		padding:4px;
		cursor: pointer;
	}
	img.img {
		display: block;
	}
</style>

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

$(function(){
	// ボタンをクリックした時
	$('p.button').click(function(){
		// degという変数を0から360まで3秒かけて変化させる。
		$({deg:0}).animate({deg:360}, {
			duration:3000,
			// 途中経過
			progress:function() {
				$('img.img').css({
					transform:'rotate(' + this.deg + 'deg)'
				});
			},
			// アニメーション完了
			complete:function() {
				alert('1回転しました!');
			}
		});
	});
});

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

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

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。記事執筆・ホームページ制作・メディア運営・コンサルティングのお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA