jQueryはフェードインとフェードアウト効果を実現します
|
jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解しておきましょう。
で
それでは、上記のコードを全体のコードに組み込んで効果を見てみましょう。
完全なコードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ウェルファンシー</title>
<スタイル>
div {
マージン: 10px;
パディング: 10px;
幅: 100ピクセル;
表示: なし;
}
</スタイル>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<本文>
<button>フェードイン効果</button>
<button>フェードアウト効果</button>
<button>フェードインとフェードアウトの切り替え</button>
<button>透明度を変更する</button>
<div>
<img src="images/1.jpg" スタイル="width: 280px;">
</div>
<スクリプト>
$(関数() {
$("ボタン").eq(0).click(関数() {
$("div").fadeIn(1000);
})
$("ボタン").eq(1).click(関数() {
$("div").fadeOut(1000);
})
$("ボタン").eq(2).click(関数() {
$("div").fadeToggle(1000);
});
$("ボタン").eq(3).click(関数() {
$("div").fadeTo(1000, 0.5);
});
});
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.18 安定版がリリースされました! 予想通りハッシュ結合が実装されました
>>: Ubuntu でホームディレクトリを新しいパーティションに移行する詳細なチュートリアル
推薦する
CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする
CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...
js における関数のネストとクロージャの詳細
目次1. 範囲2. 関数の戻り値3. 関数のネスト4. 終了5. クロージャの実用的応用1. 内部変...
CocosCreatorのホットアップデートの包括的な説明
目次序文ホットチェンジとはCocos Hot アップデートの概要マニフェストプロジェクトリソースとゲ...
モバイルフロントエンド適応ソリューション（概要）
ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...
MySQL 5.7.23 解凍バージョンのインストールチュートリアル（画像とテキスト付き）
毎回インストールチュートリアルを探すのは面倒なので、後で確認できるように手順をバックアップします。解...
MySQLサブクエリの詳細な例
サブクエリの分類返された結果セットによる分類サブクエリは、返される結果セットの違いに応じて、テーブル...
proxy_pass を設定した後に Nginx が 404 を返す問題を解決する
目次1. proxy_pass を設定した後に Nginx が 404 を返す問題のトラブルシューテ...
MySQLの共通関数の概要
序文： MySQL データベースは、よく使用される集計関数、日付および文字列処理関数など、幅広い関数...
Docker-compose はブリッジを作成し、サブネットを追加し、ネットワーク カードを削除します。
1. Dockerネットワークカードを作成する [root@i ~]# brctl addbr d...
Vue の高度なコンポーネント機能コンポーネントの使用シナリオとソースコード分析
目次導入使用シナリオソースコード分析要約する導入Vue は、コンポーネントをステートレスかつインスタ...
Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。
1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...
Alibaba Cloud Server にセキュリティ グループ ルールを追加する詳細な説明 (グラフィック チュートリアル)
Alibaba Cloud セキュリティグループの概要Alibaba Cloud Server セ...
ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験（グラフィックチュートリアル）
インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...
Node.js のモジュール性、npm パッケージ マネージャーの説明
目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...
Ubuntu20.04 VNCのインストールと設定の実装
VNC はリモート デスクトップ プロトコルです。 VNC を使用して Ubuntu 20.04 を...