今回はjQuery入門シリーズの9回目でございます！
前回の記事はこちら（´。‐ω‐｀）
【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。
jQuery を使えば、ほんの少しの記述で簡単にアニメーションを実装できちゃいます！
そんな魔法みたいな機能が jQuery にはあらかじめ用意されているのですっ！
なんてステキ…（*´Д｀）！！！
目次
目次
要素を表示・非表示させるアニメーション
要素の透明度を操作して、表示・非表示させるアニメーション効果を与える関数です。
.fadeIn()
非表示な要素をフェードイン表示させます。
|
1 2 3 |
[sourcecode lang="javascript"] $('.hoge').fadeIn( [duration ] [, complete ] ); [/sourcecode] |
- duration … 再生時間 (数値 or 文字列) デフォルトは 400
- complete … 再生終了後に実行する処理(関数)
その他、お好みでオプションを指定することができます！
.fadeOut()
表示している要素をフェードアウト表示させます。
|
1 2 3 |
[sourcecode lang="javascript"] $('.hoge').fadeOut( [duration ] [, complete ] ); [/sourcecode] |
- duration … 再生時間 (数値 or 文字列) デフォルトは 400
- complete … 再生終了後に実行する処理(関数)
その他、お好みでオプションを指定することができます！
要素を開閉させるアニメーション
各要素の高さを操作して、上から下にスライドして降りて来るイメージの効果で表示させる関数です。
.slideDown()
要素を開いた状態にします。
|
1 2 3 |
[sourcecode lang="javascript"] $('.hoge').slideDown( [duration ] [, complete ] ); [/sourcecode] |
- duration … 再生時間 (数値 or 文字列) デフォルトは 400
- complete … 再生終了後に実行する処理(関数)
その他、お好みでオプションを指定することができます！
.slideUp()
要素を閉じた状態にします。
|
1 2 3 |
[sourcecode lang="javascript"] $('.hoge').slideUp( [duration ] [, complete ] ); [/sourcecode] |
- duration … 再生時間 (数値 or 文字列) デフォルトは 400
- complete … 再生終了後に実行する処理(関数)
その他、お好みでオプションを指定することができます！
要素に独自のアニメーションをつける
.animate()
CSS のプロパティを使って、独自のアニメーション効果を作成するための関数です。
|
1 2 3 |
[sourcecode lang="javascript"] .animate( properties [, duration ] [, easing ] [, complete ] ) [/sourcecode] |
- properties … CSS のプロパティ（オブジェクト）
- duration … 再生時間 (数値 or 文字列) デフォルトは 400
- easing … イージングの種類 (文字列) デフォルトは ‘swing’
- complete … 再生終了後に実行する処理(関数)
ここで注意したいのが、プロパティ名はキャメルケースで表記されなければなりません。
例えば border-width は、borderWidth のように記述します。
例）
|
1 2 3 4 5 6 7 8 9 |
[sourcecode lang="javascript"] $('.hoge').animate({ opacity: 1.0, width: '200px', height: '200px', left: '0px', borderWidth: '10px' }); [/sourcecode] |
その他、お好みでオプションを指定することができます！
次回はいよいよ、jQuery入門シリーズの10回目（最終回）！
jQuery プラグインの簡単な設置方法をご紹介します！
第10回目はこちら。
【jQuery入門 10】プラグインを使ってみよう。
jQuery入門ガイド
- 【初心者】さくっと見れるjQueryの使い方
- 【jQuery入門 1】超基本！ jQuery のダウンロードと書き方
- 【jQuery入門 2】セレクタって何？要素を取得しよう。基本編
- 【jQuery入門 3】要素を取得しよう。セレクタって何？機能的セレクタ編
- 【jQuery入門 4】イベントって何？on、offを使ってみよう
- 【jQuery入門 5】要素の属性の取得と書き換え
- 【jQuery入門 6】要素の書き換え、追加・削除
- 【jQuery入門 7】CSSの取得・追加・変更をしよう
- 【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。
- 【jQuery入門 9】Animateなどを使って様々なアニメーションをつけよう
- 【jQuery入門 10】プラグインを使ってみよう。
