この記事では、アニメーション効果の非表示と表示を実現するためのJQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 隠すと表示する文法
パラメータの説明: オプションの速度パラメータは、非表示/表示の速度を指定し、「遅い」、「速い」、またはミリ秒の値を取ることができます。 実装コード <!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に切り替え フェードインとフェードアウト文法
パラメータの説明: オプションの速度パラメータは、非表示/表示の速度を指定し、「遅い」、「速い」、またはミリ秒の値を取ることができます。 実装コード <!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Tomcat は、Springboot プロジェクトの WAR パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました
>>: MySQL監視グループレプリケーションについて簡単に説明します
#include <linux/moduleparam.h> 1. モジュールパラメータ...
1. インストール前の準備1. 公式ウェブサイトからUbuntu 20.04のイメージファイルを直接...
最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...
ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...
データベースのバックアップ #文法: # mysqldump -h server-u usernam...
1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...
01. コマンドの概要basename - ファイル名からディレクトリとサフィックスを削除しますba...
まず、公式ウェブサイト http://dev.mysql.com/downloads/mysql/ ...
これは、面接者の CSS に関する基本的な知識をテストするものです。 CSSでアニメーションを実装す...
目次特徴保存戦略自己増加の決定自動増分値の変更実行プロセス問題点自動増分ロックロック戦略バッチ挿入の...
目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...
この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考...
序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...
1. プロジェクトの実行時に報告されるエラー情報は次のとおりです。 ファイル "/home...
この記事では、クリック時にサブメニューを表示するためのJavaScriptの具体的なコードを参考まで...