【jQuery】回転のアニメーションをする例
Category JavaScript
/ Tagged jQuery
2013/08/02
問題
jQueryプラグインとか無しで、回転できる？
答え
回転します。
jQueryプラグイン無しで、回転します！
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);
}
})
ちょっと回してみたいだけのときに使えると思います。
はじめまして。
かなり参考になりました。
今から頑張ってみます。
あと、本題とは逸れてしまうのですが、気になってソースを拝見しました。
で、headの部分が気になりました。
metaのtwittercardですが、propatyではなくnameではないでしょうか？？
その直下のtwittersiteはnameになっているので、こちらが正しいのでは、と思い、連絡しようと…。
無知なので間違っていたらすみません。
ほんとですね。ご指摘ありがとうございます。
twitter: は name で、og: は property で……。修正しました。
よかったです。
でも、僕は回転できませんでした（；；）
なんでだろ…。
transitionを使ってrotateを動かしていたのですが、Androidだとゼンゼン動かなかったので上記のjsを参考にさせていただきました。
とても助かりました！ありがとうございます。