Webページの動的変更例１の情報バーに「閉じる」ボタンをつけます。そのボタンをクリックすると、情報バーがフェードアウトして消え、それ以降は表示されないようにします（ページをリロードすると、また表示されるようになります）
ステップ１ 閉じるボタンのマークアップ
情報バーにid属性「closeButton」を持つdiv要素を追加します。
＜HTML＞
1 2 3 4 5 6 7 | <section id="infobar"><h1>情報ウィンドウ</h1><div id="closeButton">×</div> この資料の出典はXXXXです。 全文を読みたければ<a href=""出典のURL”">こちら</a>からどうぞ。</section> |
＜ｊQuesry＞
閉じるボタンの処理を追加する
1 2 3 4 5 6 7 8 | // (1) 閉じるボタンをクリックされた時$('#closeButton').click(function() { // (2) 情報バーをフェードアウトし、 infobar.fadeOut(function() { // (3) アニメーションが完了したら、情報バーの要素を削除 infobar.remove(); });}); |
fadeOut()やanimate()などアニメーション系のメソッドは、引数に関数を指定すると、アニメーションが終了した際にその関数が呼び出されます。
ステップ２ 情報バーの表示／非表示をアニメーションさせる
情報バーを表示する方法として、前回はrightプロパティに値を直接指定していました。今回は情報バーが右から左にスライドして現れるよう、以下のようにanimate()メソッドを使用してrightプロパティの値を変更しています。
1 2 3 4 | // 500msかけてrightの値を0まで変化させるinfobar.animate({ right: 0}, 500); |
情報バーを隠す処理も同様です。animate()メソッドを以下のように指定しています。
1 2 3 | infobar.animate({ right: -infobar.outerWidth()}, 500); |
出典：jQuery入門 with Dreamweaver CS5.5
http://www.adobe.com/jp/devnet/dreamweaver/articles/dwjquery_01.html