[jQuery]fadeOutとfadeIn

fadeOutは対象の要素を隠してくれて、fadeInは表示してくれる。

fadeOutとfadeInの引数

1.speed

  速度を指定する。数値(ミリ秒)を指定した場合は、そのスピードで表示、非表示になります。
  文字列を指定した場合は、以下のどうさになります。ざっくり指定するにはこれですね。

  slow:ゆっくりと
  normal:普通
  fast:早く

  *この値を省略した場合は、「normal」な動作となります。

2.callback

  表示、非表示が完了したタイミングでコールバックされる関数。任意指定だから特に指定しなくても大丈夫。

---

下の例は、表示、非表示はゆっくりな動作を指定して、非表示にした場合にはボタンのラベルを「表示」にし、表示した場合には「閉じる」にしています。

<script type="text/javascript">
    $(function () {
        var button$ = $('input[type=button]');
        button$.toggle(
                function () {
                    $('div#hoge').fadeOut("slow", function() {
                        button$.val("表示");
                    });
                },
                function() {
                    $('div#hoge').fadeIn("slow", function() {
                        button$.val("閉じる");
                    });
                }
        )
    })
</script>