jQueryのfadeinとfadeoutメソッドの使用例

本文实例讲述了jQuery中fadein与fadeout方法用法。分享给大家供大家参考，具体如下：

<!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 () {
      $("#btnfadeIn").click(function () {
        "$message".fadeIn(1000);
      });
      $("#btnfadeOut").click(function () {
        $("#message").fadeOut(1000);
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnfadeIn" type="button" value="divをフェードイン"> />
    <input id="btnfadeOut" type="button" value="divをフェードアウト"> />
  </div>
  <div id="message">
    mouseoverとmouseenterの違い：div内にdivが入っています。メモを参照してください。イベントバブルに関連しています。<br /> 
    マウス指標が選択された要素またはその子要素を通過するときは、mouseoverイベントがトリガーされます <br />
    マウス指標が選択された要素を通過したときのみ、mouseenterイベントがトリガーされます（子要素を通過してもトリガーされません）
  </div>
</body>
</html>

jQueryに関する詳細な内容に興味を持つ読者は、以下の本サイトの特集を参照してください：《jQuery DOMノード操作方法のまとめ》、《jQueryページ要素操作の技術集》、《jQueryイベントの使用法と技術集》、《jQuery常用プラグインと使用法のまとめ》、《jQuery拡張技術のまとめ》、《jQueryテーブル(table)操作の技術集》、《jQueryよくあるエフェクトのまとめ》および《jQuery選択子の使用法のまとめ》

本文の内容が皆様のjQueryプログラミングに役立つことを願っています。

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

基本チュートリアル