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

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

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

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の新しいプロパティを使うだけでなく、アイデアしだいでは、ちょっと凝った動きなんかもできそう。ぜひお試しください！

＝＝＝

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします！

「いいね！」と思ったら、クリックお願いいたします<m(__)m>