Webページの動的変更例２

Webページの動的変更例１の情報バーに「閉じる」ボタンをつけます。そのボタンをクリックすると、情報バーがフェードアウトして消え、それ以降は表示されないようにします（ページをリロードすると、また表示されるようになります）

ステップ１　閉じるボタンのマークアップ

情報バーにid属性「closeButton」を持つdiv要素を追加します。
＜HTML＞

<section id="infobar">
<h1>情報ウィンドウ</h1>
<div id="closeButton">×</div>
 この資料の出典はXXXXです。

 全文を読みたければ
<a href="&quot;出典のURL”">こちら</a>からどうぞ。</section>

＜ｊQuesry＞
閉じるボタンの処理を追加する

// (1) 閉じるボタンをクリックされた時
$('#closeButton').click(function() {
    // (2) 情報バーをフェードアウトし、
    infobar.fadeOut(function() {
        // (3) アニメーションが完了したら、情報バーの要素を削除
        infobar.remove();
    });
});

fadeOut()やanimate()などアニメーション系のメソッドは、引数に関数を指定すると、アニメーションが終了した際にその関数が呼び出されます。

ステップ２　情報バーの表示／非表示をアニメーションさせる

情報バーを表示する方法として、前回はrightプロパティに値を直接指定していました。今回は情報バーが右から左にスライドして現れるよう、以下のようにanimate()メソッドを使用してrightプロパティの値を変更しています。

// 500msかけてrightの値を0まで変化させる
infobar.animate({
  right: 0
}, 500);

情報バーを隠す処理も同様です。animate()メソッドを以下のように指定しています。

infobar.animate({
  right: -infobar.outerWidth()
}, 500);

出典：jQuery入門 with Dreamweaver CS5.5
http://www.adobe.com/jp/devnet/dreamweaver/articles/dwjquery_01.html

Webページの動的変更例２

カテゴリー