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監視グループレプリケーションについて簡単に説明します

推薦する

VMware15.5 インストール Ubuntu20.04 グラフィック チュートリアル

1. インストール前の準備1. 公式ウェブサイトからUbuntu 20.04のイメージファイルを直接...

Linux でジャンプ サーバー経由でリモート サーバーに接続し、ファイルを転送する方法

最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...

Vue はトークンを取得してトークン ログインのサンプル コードを実装します

ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...

MySQL データベースのバックアップとリカバリの実装コード

データベースのバックアップ #文法: # mysqldump -h server-u usernam...

MySQL インデックスの正しい使い方とインデックスの原理の詳細な説明

1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...

Linuxのbasenameコマンドの使い方

01. コマンドの概要basename - ファイル名からディレクトリとサフィックスを削除しますba...

mysql 5.7.19 最新バイナリインストール

まず、公式ウェブサイト http://dev.mysql.com/downloads/mysql/ ...

CSS3でアニメーションを実装する3つの方法

これは、面接者の CSS に関する基本的な知識をテストするものです。 CSSでアニメーションを実装す...

MySQL の自動増分主キーに関する詳細な説明

目次特徴保存戦略自己増加の決定自動増分値の変更実行プロセス問題点自動増分ロックロック戦略バッチ挿入の...

React Hooks の一般的な使用シナリオ (概要)

目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...

JavaScript は自由に移動するウィンドウのマウス制御を実装します

この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考...

MySQL の列から行への変換のヒント (共有)

序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...

Django 2.2 を MySQL データベースに接続する方法

1. プロジェクトの実行時に報告されるエラー情報は次のとおりです。 ファイル "/home...

サブメニューをクリックする効果を実現するJavaScript

この記事では、クリック時にサブメニューを表示するためのJavaScriptの具体的なコードを参考まで...