｢君アレ｣番外編～イチからのjQuery～ 3

アニメーション

ここまでで、【cssのスタイル変更】と【イベント(タイミングのコントロール)】について振り返ってみました。
が、それだけだと一瞬で変更が完了してしまい面白くない。
今回はもっとインタラクティブなサイトを彩る「アニメーション」を導入してみましょう！

jQueryにあらかじめ用意されているanimate()メソッドの使い方を覚えましょう～

js


$(function(){
　.animate({
　　'cssプロパティ':'値',
　　'cssプロパティ':'値',
　　'cssプロパティ':'値'
　},
　アニメーション時間
　);
});

[クリックしてね♪]をクリックしたらテキスト「Hello!」のフォントサイズが12pxから100pxに徐々に大きくなるよ！

js


$(function(){
　$("button").click(function(){
　　$(".demo04").animate({
　　fontSize: "100px"
　　}, 1500 );
　});
});

HTML


<button>クリックしてね♪</button>
<div class=”demo04″>Hello!</div>

[アニメーション完了時の見た目を表現するcssプロパティと値]を渡します。

js


$(function(){
　$("button").click(function(){
　　$(".demo04").animate({
　　fontSize: "100px"
　　}, 1500 );
　});
});

[どのくらいの時間をかけてアニメーションさせるか]を渡します。
※時間の単位はミリ秒です。「1500」と指定すると1.5秒かけてアニメーションさせます。

js


$(function(){
　$("button").click(function(){
　　$(".demo04").animate({
　　fontSize: "100px"
　　}, 1500 );
　});
});

フォントや背景の色を変更するにはjQueryにデフォルトで用意されているanimate()メソッドだけではアニメーション出来ないプロパティです。
これらのプロパティをアニメーションさせるにはjQueryの公式拡張ライブラリである『jQuery UI』を読み込まないといけません。

アニメーションは楽しい要素満載なので引き続き掘り下げていこうと思います！

それでは第3回はこのへんで！(・∀・)ｱﾃﾞｭｰ