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

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;
   }
   
   p {
    背景:ラベンダーブラッシュ;
    パディング: 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;
   }
   
   p {
    背景:ラベンダーブラッシュ;
    パディング: 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JQuery で表示と非表示を切り替える 4 つの簡単な方法
  • 入力ボックスがフォーカスを取得/失ったときにテキストを非表示/表示する (jQuery バージョン)
  • JQueryでdivを表示および非表示にするいくつかの方法の簡単な概要
  • jQueryとJSでdivの非表示と表示を実現する
  • jQuery で TR の表示と非表示を制御するいくつかの方法
  • TRの表示と非表示を制御するjQueryの3つの一般的な方法
  • jQuery エフェクト slideToggle() メソッド (非表示と表示を切り替える)
  • データグリッドの列を動的に表示および非表示にする jQuery メソッド
  • jQuery 非表示の入力オブジェクトを表示する
  • JQuery のクリック ボタンをクリックしてレイヤー コードを表示および非表示にする

<<:  Tomcat は、Springboot プロジェクトの WAR パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました

>>:  MySQL監視グループレプリケーションについて簡単に説明します

推薦する

CentOS7にJDK8をrpmモードでインストールする

CentOS 7が正常にインストールされると、OpenJDKのJREがデフォルトでインストールされて...

HTML マルチヘッダーテーブルコード

1. マルチヘッダーテーブルコードコードをコピーコードは次のとおりです。 <!DOCTYPE ...

CSS3の新しい背景プロパティの詳細な説明

これまで、CSS の背景の属性には、color、image、repeat、attachment、po...

jsはタイトルと説明のキーワードを検出し、見つかった場合は置換するか他のページにジャンプします。

キーワード 一般タイトルには、クラック、キー、シリアル番号、キージェネレータなどの単語を含めることは...

JavaScript Reduceの詳しい説明

目次地図フィルターいくつかの毎インデックスを検索パイプ参考回答1. パラメータを受け入れる関数を返す...

Windows 10 で MySql の解凍バージョンをインストールして構成する方法のチュートリアル

Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...

ウェブページを白黒に変換します(Google、Firefox、IE、その他のブラウザと互換性があります)

CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール(1...

Angular 依存性注入の説明

目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...

MySQL 5.7.10 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...

Linux echo テキスト処理コマンドの使用法と例

Linux ヘルプ ドキュメントでの echo の説明は、Python や Java などのプログラ...

シンプルなデータ応答システムを実装する

目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...

MySQL で戻り値ありと戻り値なしのストアド プロシージャを書く 2 つの方法

プロセス1: 戻り値あり: proc_addNum が存在する場合はプロシージャを削除します。 プロ...

Navicat が MySql サーバーにリモート接続できない問題の解決策

Navicat が MySql サーバーにリモート接続できない問題の解決策は、先頭に書かれています:...

Linux (Centos7) に mysql8.0.18 をインストールするチュートリアル図

1 インストールリソースパッケージmysql-8.0.18-1.el7.x86_64.rpm-bun...

CSS3はキングをマッチングさせるときにパーティクルアニメーション効果を実現します

コーディングをしていると、多くのことが同じ結末を迎えることに気づくでしょう。問題を解決する方法は何千...