2013年1月11日金曜日

[jQuery]アニメーション

Example: ソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>sample02</title>
    <script type="text/javascript">
  $(function() {
    $("button#001").click(function() {
      $("div#a").show("slow");
    });
    $("button#002").click(function() {
      $("div#a").show(3000);
    });
    $("button#010").click(function() {
      $("div#a").hide();
    });
  })
    </script>
    <style type="text/css">
  div {
    width: 200px;
    height: 200px;
    background: red;
    display: none;
  }
    </style>
  </head>
  <body>
    <button id="001" type="button">表示 (slow)</button><br>
    <button id="002" type="button">表示 (3000msec)</button><br>
    <button id="010" type="button">非表示</button><br>
    <div id="a">a</div>
    <br>
  </body>
</html>
結果
sample02 (fc2 にあるテストページに飛びます)

0 件のコメント:

コメントを投稿