jQueryのslidedownとslideupメソッドの使用例

ここでは、例を交えてjQueryのslidedownとslideupメソッドの使用法を要約し、分析しました。皆さんにご参考になれば幸いです。以下の通りです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown();1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp();1000);
      });
      //*****例1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle();1000);
      //      });
      //*****例2 アニメーション関数はコールバック関数を渡すことができます。つまり、アニメーションが終了するとこの関数が実行されます。
      $("#btnToggle").click(function () {
        $("#message").slideToggle();1000, function () {
          alert('我执行完毕了!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="divを開く" />
    <input id="btnslideUp" type="button" value="divを閉じる" />
    <input id="btnToggle" type="button" value="切り替え" />
  </div>
  <div id="message">
    mouseoverとmouseenterの違い：div内にdivを入れます。メモを参照してください。イベントの冒泡に関連しています。<br /> 
    マウス指針が選択された要素またはその子要素を通過するかどうかに関わらず、mouseover イベントが発生します <br />
    マウス指針が選択された要素を通過したときのみ、mouseenter イベントが発生します（子要素を通過しても発生しません）
  </div>
</body>
</html>

jQueryに関連する内容に興味を持つ読者は、以下の本サイトの特集を確認してください：《jQueryウィンドウ操作の技術的な要約》、《jQueryドラッグ効果と技術的な要約》、《jQueryよく使われるプラグインとその使用法の要約》、《jQuery中のAjaxの使用法の要約》、《jQueryテーブル(table)操作の技術的な要約》、《jQuery拡張技術の要約》、《jQueryよくある効果の要約》、《jQueryアニメーションと効果の使用法の要約》および《jQuery選択子の使用法の要約》

この記事に記載されている内容が皆様のjQueryプログラムデザインに役立つことを願っています。

声明：本文の内容はインターネットからネットワークに、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされた内容であり、本サイトは所有権を持ちません。また、人間による編集は行われていません。著作権侵害の疑いのある内容を見つけた場合は、以下のメールアドレスにご連絡ください：notice#oldtoolbag.com（メール送信時、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは直ちに侵害される疑いのある内容を削除します。）

基本教程