JQueryはアニメーション効果の非表示と表示を実装します

この記事では、アニメーション効果の非表示と表示を実現するためのJQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

隠すと表示する

文法

$(セレクタ).fadeIn([速度,コールバック]);
$(セレクタ).fadeOut([速度,コールバック]);
$(セレクタ).fadeToggle([速度,コールバック]);

パラメータの説明:

オプションの速度パラメータは、非表示/表示の速度を指定し、「遅い」、「速い」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、非表示または表示が完了した後に実行される関数の名前です。

実装コード

<!DOCTYPE html>
<html>

 <ヘッド>
  <メタ文字セット="UTF-8">
  <title>ドキュメント処理</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <スタイル>
   div {
    背景: 水色;
    パディング: 20px;
   }
   
   ｐ {
    背景：ラベンダーブラッシュ;
    パディング: 20px;
   }
  </スタイル>
  <スクリプト>
   $(関数() {
    $("#btnHide").click(function() {
     //$("div").hide();
     //$("div").hide(2000);
     $("div").hide(2000, 関数() {
      alert("非表示が完了しました!");
     });
    });
    $("#btnShow").click(function() {
     //$("div").show();
     //$("div").show(2000);
     $("div").show(2000, 関数() {
      alert("表示が完了しました!");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").toggle();
     //$("p").toggle(2000);
     $("p").toggle(2000, 関数() {
      alert("切り替えが完了しました!");
     });
    });
   });
  </スクリプト>
 </head>

 <本文>
  <button id="btnHide">div を非表示</button>
  <button id="btnShow">表示div</button>
  <button id="btnToggle">表示と非表示を切り替える -p</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p style="display: none;">p1</p>
  <p>p2</p>
 </本文>

</html>

エフェクト表示

効果表示を非表示

ディスプレイ効果表示

表示と非表示を切り替える

P1からP2に切り替え

フェードインとフェードアウト

文法

$(セレクタ).fadeIn([速度,コールバック]);
$(セレクタ).fadeOut([速度,コールバック]);
$(セレクタ).fadeToggle([速度,コールバック]);

パラメータの説明:

実装コード

<!DOCTYPE html>
<html>

 <ヘッド>
  <メタ文字セット="UTF-8">
  <title>効果</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <スタイル>
   div {
    背景: 水色;
    パディング: 20px;
   }
   
   ｐ {
    背景：ラベンダーブラッシュ;
    パディング: 20px;
   }
  </スタイル>
  <スクリプト>
   $(関数() {
    $("#btnIn").click(関数() {
     //$("div").fadeIn();
     //$("div").fadeIn(2000);
     $("div").fadeIn(2000, 関数() {
      alert("フェードインが完了しました!");
     });
    });
    $("#btnOut").click(function() {
     //$("div").fadeOut();
     //$("div").fadeOut(2000);
     $("div").fadeOut(2000, 関数() {
      alert("フェードアウトが完了しました!");
     });
    });
    $("#btnToggle").click(function() {
     //$("p").fadeToggle();
     //$("p").fadeToggle(2000);
     $("p").fadeToggle(2000, 関数() {
      alert("切り替えが完了しました!");
     });
    });
   });
  </スクリプト>
 </head>

 <本文>
  <button id="btnIn">フェードイン div</button>
  <button id="btnOut">フェードアウト div</button>
  <button id="btnToggle">フェードインとフェードアウトを切り替える - P</button>
  <div>div1</div>
  <br/>
  <div>div2</div>
  <p style="display: none;">p1</p>
  <p>p2</p>
 </本文>

</html>

効果は隠したり表示したりするのとあまり変わらない

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: