アニメーションエフェクト

jQuery

SICPの方、かなり切りが悪いけどここで久々にjQueryに復帰。（理由は秘密。）
さて、第１１はアニメーションについて。いろいろ出てきますね〜。

メソッド 概要 アニメーションの仕方
show([スピード[, コールバック関数]])

　○スピード："slow"|"norma"|"fast"|数値[msec]　のいずれかを指定。

　○コールバック関数：アニメーション処理が終わった後に続けて実行される命令。		 CSS の display プロパティが none に設定されているHTML要素を表示（block）にする。 高さ、幅を 0px から設定されている高さ、幅に徐々に変化させていく。

変化のスピードは、showの引数で指定される。
hide([スピード[, コールバック関数]])

　○スピード："slow"|"norma"|"fast"|数値[msec]　のいずれかを指定。

　○コールバック関数：アニメーション処理が終わった後に続けて実行される命令。		 CSS の display プロパティが block に設定されているHTML要素を非表示（none）にする。 show の逆の動きを実行する。

設定されている高さ、幅を、徐々に 0px に変化させていく。

変化のスピードは、hideの引数で指定される。
toggle([スピード[, コールバック関数]])

　○スピード："slow"|"norma"|"fast"|数値[msec]　のいずれかを指定。

　○コールバック関数：アニメーション処理が終わった後に続けて実行される命令。		 CSS の display プロパティが block に設定されているHTML要素は非表示（none）に、

none に設定されているHTML要素は表示（block）にする。		 show と hide の操作を一つのメソッドで実装できる。

設定されている高さ、幅を、徐々に 0px に変化させていく。

変化のスピードは、toggleの引数で指定される。
slideDown([スピード[, コールバック関数]])

　○スピード："slow"|"norma"|"fast"|数値[msec]　のいずれかを指定。

　○コールバック関数：アニメーション処理が終わった後に続けて実行される命令。		 CSS の display プロパティが none に設定されているHTML要素を表示（block）にする。
 設定されている高さを、徐々に 0px に変化させていく。

変化のスピードは、slideDownの引数で指定される。
slideUp([スピード[, コールバック関数]])

　○スピード："slow"|"norma"|"fast"|数値[msec]　のいずれかを指定。

　○コールバック関数：アニメーション処理が終わった後に続けて実行される命令。		 CSS の display プロパティが block に設定されているHTML要素を非表示（none）にする。
0pxの高さを、徐々に設定されている高さに変化させていく。

変化のスピードは、slideUpの引数で指定される。
slideToggle([スピード[, コールバック関数]])

　○スピード："slow"|"norma"|"fast"|数値[msec]　のいずれかを指定。

　○コールバック関数：アニメーション処理が終わった後に続けて実行される命令。		 CSS の display プロパティが block に設定されているHTML要素は非表示（none）に、

none に設定されているHTML要素は表示（block）にする。		 show と hide の操作を一つのメソッドで実装できる。

設定されている高さ、幅を、徐々に 0px に変化させていく。

変化のスピードは、toggleの引数で指定される。
fadeIn([スピード[, コールバック関数]])

　○スピード："slow"|"norma"|"fast"|数値[msec]　のいずれかを指定。

　○コールバック関数：アニメーション処理が終わった後に続けて実行される命令。		 CSS の display プロパティが none に設定されているHTML要素を表示（block）にする。
 指定した要素を、徐々に表示させていく。

変化のスピードは、fadeInの引数で指定される。
fadeOut([スピード[, コールバック関数]])

　○スピード："slow"|"norma"|"fast"|数値[msec]　のいずれかを指定。

　○コールバック関数：アニメーション処理が終わった後に続けて実行される命令。		 CSS の display プロパティが block に設定されているHTML要素を非表示（none）にする。
指定した要素を徐々に非表示させていく。

変化のスピードは、fadeOutの引数で指定される。
fadeTo([スピード, 透明度, コールバック関数)

　○スピード："slow"|"norma"|"fast"|数値[msec]　のいずれかを指定。

　○透明度：0(表示)〜1(非表示)の間の実数を指定。
　○コールバック関数：アニメーション処理が終わった後に続けて実行される命令。		 CSS の display プロパティが block に設定されているHTML要素を非表示（none）にする。
指定した要素を徐々に非表示させていく。

変化のスピードは、fadeOutの引数で指定される。
まとめたソースはこんな感じ。。imgタグじゃないと期待した動作をしないものがあるのかなぁ。
fadeIn/fadeOutとか。。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function() {
        //showメソッドの実験
        $("#ShowButton").click(function () {
          $("#ShowHideDiv").show("normal", function() {
            $("#ShowHideDiv").css("background-color", "blue")
                             .css("color", "white");
            $("#ShowHideSpan").text("表示しました。");
          });
        });

        //hideメソッドの実験
        $("#HideButton").click(function () {
          $("#ShowHideDiv").hide("normal", function() {
            $("#ShowHideDiv").css("background-color", "red")
                             .css("color", "black");
            $("#ShowHideSpan").text("非表示にしました。");
          })
        });

        //toggleメソッドの実験
        $("#ToggleButton").click(function () {
          $("#ToggleDiv").toggle("normal", function() {
            var toggle = $("#ToggleDiv")
            if (toggle.css("display") == "none") {
              toggle.css("background-color", "red")
                    .css("color", "black");
              $("#ToggleSpan").text("非表示にしました。");
            } else {
              toggle.css("background-color", "blue")
                    .css("color", "white");
              $("#ToggleSpan").text("表示しました。");
            }
          });
        });

        //slideUp、slideDownメソッドの実験
        var slideUpDownDt = $("#SlideUpDownDt")
        slideUpDownDt.click(function () {
          var slideUpDownDd = $("#SlideUpDownDd")
          if (slideUpDownDd.css("display") == "block") {
            slideUpDownDd.slideUp("slow", function() {
              $("#SlideUpDownArrow").text("▼");
            });
          } else {
            slideUpDownDd.slideDown("slow", function() {
              $("#SlideUpDownArrow").text("▲");
            });
          }
        });
      
        //slideToggleの実験
        $("#SlideToggleDt").click(function () {
          var slideToggle = $("#SlideToggleDd")
          slideToggle.slideToggle("slow", function() {
            if (slideToggle.css("display") == "block") {
              $("#SlideToggleArrow").text("▲");
            } else {
              $("#SlideToggleArrow").text("▼");
            }
          });
        });

        //fadeInメソッドの実験
        $("#FadeInButton").click(function () {
          $("#FadeInOutDiv").show("slow", function() {
            $("#FadeInOutDiv").css("background-color", "blue")
                              .css("color", "white");
            $("#FadeInOutSpan").text("表示しました。");
          });
        });

        //fadeOutメソッドの実験
        $("#FadeOutButton").click(function () {
          $("#FadeInOutDiv").hide("normal", function() {
            $("#FadeInOutDiv").css("background-color", "red")
                              .css("color", "black");
            $("#FadeInOutSpan").text("非表示にしました。");
          })
        });

        //fadeToメソッドの実験
        $("#FadeToButton").click(function () {
          $("#FadeToDiv").hide("slow", 0.5, function() {
            $("#FadeToSpan").text("非表示にしました。");
          })
        });

      })
    </script>
  </head>
  <body>
    <!-- show/hide -->
    <button id="ShowButton">showメソッド</button>
    <button id="HideButton">hideメソッド</button>
    <br/>
    <span id="ShowHideSpan"></span>
    <br/>
    <div id="ShowHideDiv" style="display:none; width:200px; height:200px; background-color:red;">show/hideのテスト</div>
    <!-- toggle -->
    <button id="ToggleButton">toggleメソッド</button>
    <br/>
    <span id="ToggleSpan"></span>
    <br/>
    <div id="ToggleDiv" style="display:none; width:200px; height:200px; background-color:red;">toggleのテスト</div>
    <!-- slideUp/slideDown -->
    <dl style="width:300px;">
      <dt id="SlideUpDownDt" style="background: #7CADB6; cursor: pointer;">
	<span id="SlideUpDownArrow">▲</span>
	<span id="SlideUpDownSpan">slideUp/slideDownのテスト</span>
      </dt>
      <dd id="SlideUpDownDd" style="border: 1px solid #7CADB6; height: 300px; margin:0px;">
        slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
      </dd>
    </dl>
    <!-- slideToggle -->
    <dl style="width:300px;">
      <dt id="SlideToggleDt" style="background: #7CADB6; cursor: pointer;">
	<span id="SlideToggleArrow">▲</span>
	<span id="SlideToggleSpan">slideToggleのテスト</span>
      </dt>
      <dd id="SlideToggleDd" style="border: 1px solid #7CADB6; height: 300px; margin:0px;">
        slideToggle()は、slideUp()/slideDown()を一度に行えるメソッドです。
      </dd>
    </dl>
    <!-- fadeIn/fadeOut -->
    <button id="FadeInButton">fadeInメソッド</button>
    <button id="FadeOutButton">fadeOutメソッド</button>
    <br/>
    <span id="FadeInOutSpan"></span>
    <br/>
    <div id="FadeInOutDiv" style="display:none; width:200px; height:200px; background-color:red;">fadeIn/fadeOutのテスト</div>
    <!-- fadeTo -->
    <button id="FadeToButton">fadeToメソッド</button>
    <br/>
    <span id="FadeToSpan"></span>
    <br/>
    <div id="FadeToDiv" style="width:200px; height:200px; background-color:red;">fadeToのテスト</div>
  </body>
</html>