この記事では、アニメーション効果の非表示と表示を実現するための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監視グループレプリケーションについて簡単に説明します
CentOS 7が正常にインストールされると、OpenJDKのJREがデフォルトでインストールされて...
1. マルチヘッダーテーブルコードコードをコピーコードは次のとおりです。 <!DOCTYPE ...
これまで、CSS の背景の属性には、color、image、repeat、attachment、po...
キーワード 一般タイトルには、クラック、キー、シリアル番号、キージェネレータなどの単語を含めることは...
目次地図フィルターいくつかの毎インデックスを検索パイプ参考回答1. パラメータを受け入れる関数を返す...
Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...
CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール(1...
目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...
MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...
Linux ヘルプ ドキュメントでの echo の説明は、Python や Java などのプログラ...
目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...
プロセス1: 戻り値あり: proc_addNum が存在する場合はプロシージャを削除します。 プロ...
Navicat が MySql サーバーにリモート接続できない問題の解決策は、先頭に書かれています:...
1 インストールリソースパッケージmysql-8.0.18-1.el7.x86_64.rpm-bun...
コーディングをしていると、多くのことが同じ結末を迎えることに気づくでしょう。問題を解決する方法は何千...