jQuery での表示/非表示

Javascript に取り組もうと思ったら避けては通れない jQuery!
今回はまず jQuery での表示,非表示です。
 ※私が最近何かと使うようになったので覚書に・・・

<html>
    <head>
        <script src="./jquery-1.9.1.min.js"></script>   
    </head>
    <body>

        <input type="button" onclick="$('#disp_box').show();" value="Show">
        <input type="button" onclick="$('#disp_box').hide();" value="Hide">
        <input type="button" onclick="$('#disp_box').fadeIn('normal');"  value="Fade In">
        <input type="button" onclick="$('#disp_box').fadeOut('normal');" value="Fade Out">

        <div id="disp_box">Display Text Area</div>

    </body>
</html>     

sample

たったこれだけで表示/非表示ができてしまうとは「凄い!」の一言につきますね。

何より感動したのは callback に対応していることですね。
A と B という DIV があるときも「A を非表示にしてから B を表示」や「A を表示してから B を非表示」が
簡単にできてしまいます。

しかし、”fadeTo();” や “toggle();” は現在の状況に影響されたりするのであまり好きではありません。
どうしても使わないといけないわけでもないので「まぁ、いいかな」っていうのが個人の感想ですね。

なんにしても「jQuery は偉大だなぁ・・・」とつくづく思いますね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 3 人中 1 人がこの 投稿 は役に立ったと言っています。

jQuery での表示/非表示」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です