SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

【jQuery】回転のアニメーションをする例

問題

jQueryプラグインとか無しで、回転できる?

rotate

答え

回転します。

jQueryプラグイン無しで、回転します!

kappenguin

jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。

それならば、表示に影響しないz-indexなどのプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して回転などのプロパティの指定に使ってはどうかというアイデアで作ってみました。

//ここでは表示に影響しないz-indexをアニメーションさせます(見た目には何も起きません)
$('#sample20130314').animate({zIndex:1},{
	//1秒かけてアニメーション
	duration:1000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//nowに現在のz-indexの値(0から1に変化しているところ)が渡してもらえる
		//0から1に向かって変化していくnowを利用して3回転(1080度)させてみる
		$(this).css({transform:'rotate(' + (now * 1080) + 'deg)'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130314').css('zIndex', 0);
	}
})

ちょっと回してみたいだけのときに使えると思います。

関連するメモ

コメント(4)

いわさき 2013年10月2日 15:21

はじめまして。
かなり参考になりました。
今から頑張ってみます。

あと、本題とは逸れてしまうのですが、気になってソースを拝見しました。
で、headの部分が気になりました。

metaのtwittercardですが、propatyではなくnameではないでしょうか??
その直下のtwittersiteはnameになっているので、こちらが正しいのでは、と思い、連絡しようと…。
無知なので間違っていたらすみません。

yoshimura 2013年10月2日 15:31

ほんとですね。ご指摘ありがとうございます。
twitter: は name で、og: は property で……。修正しました。

いわさき 2013年10月2日 15:58

よかったです。
でも、僕は回転できませんでした(;;)
なんでだろ…。

本屋@ 2014年11月19日 13:42

transitionを使ってrotateを動かしていたのですが、Androidだとゼンゼン動かなかったので上記のjsを参考にさせていただきました。
とても助かりました!ありがとうございます。