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 でホームディレクトリを新しいパーティションに移行する詳細なチュートリアル
推薦する
MySQL における exists、in、any の基本的な使い方
【1】存在するループを使用して外部テーブルを 1 つずつクエリし、各クエリの存在する条件ステートメン...
Linux のごみ箱メカニズムの実装プロセスと使用方法の詳細な説明
序文： Linux システムでの rm は元に戻せません。コマンドの設計自体に問題はありません。問題...
mysql5.7.17 zip の解凍とインストールの詳細な手順
1. ダウンロードアドレスhttps://dev.mysql.com/downloads/mysql...
MySQL sql_mode の変更が有効にならない理由と解決策
目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...
MySQL は ACID トランザクションをどのように実装しますか?
序文最近、面接中に、MySQL の InnoDB エンジンがどのようにトランザクションを実装している...
コードレイン効果を実現するjQueryプラグイン
この記事では、コードレイン特殊効果を実現するためのjQueryプラグインの具体的なコードを参考までに...
Dockerボリュームコンテナ間のデータ共有の実装
ボリュームとは何ですか?ボリュームは英語で容量を意味し、Docker ではデータ ボリューム、つまり...
MySQLのテーブル構造を変更する際に知っておきたいメタデータロックの詳しい解説
序文MySQL を扱ったことがある人なら、テーブル メタデータ ロックの待機についてよく知っているは...
Dockerでudpポート番号を指定する問題を解決する
Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...
CSS3はリストの無限スクロール/カルーセル効果を実現します
効果プレビューアイデア現在のリストを最後の項目までスクロールし、すぐに最初の項目に戻ります。問題1....
IE6 での PNG アルファ透明度 (完全コレクション)
IE6 は PNG の透明度をサポートしていないと多くの人が言っています。実際、IE は 100%...
Docker ケース分析: Redis サービスの構築
目次1 マウントディレクトリとファイルを作成する2 Redisイメージを取得する3 コンテナを作成し...
MySQL に絵文字表現を挿入できない問題の解決方法
序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...
React リストバーとショッピングカートコンポーネントの使用の詳細な説明
この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...
JavaScript ファクトリーパターンの説明
目次シンプルファクトリーファクトリーメソッド安全な工場方法アブストラクトファクトリー要約するシンプル...