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