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 InnoDBエンジンのインデックスとストレージ構造の詳細な説明
序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...
CSS で動的な画像の 9 グリッド レイアウトを実装するためのサンプル コード
前提条件: content="width=750" <meta name=...
Mysql varchar型の合計操作例
友人の中には、データベースについて学習しているときに、テーブル構造を作成するときに誤ってフィールドを...
Mysql で自動増分主キー ID を更新するときに問題が発生しました
目次自動インクリメント ID を更新する理由は何ですか?質問解決方法これは私が知っている問題ですが、...
nginxで静的リソースを公開する方法
ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...
MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?
導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...
MySQL スレーブ ライブラリ Seconds_Behind_Master 遅延の概要
目次MySQL スレーブ ライブラリ Seconds_Behind_Master 遅延の概要1. 遅...
MySQL デュアルマシン ホットスタンバイ実装ソリューション [テスト可能]
目次1. コンセプト2. 環境の説明3. マスタースレーブホットスタンバイ実装1. コンセプト1. ...
Linuxにおけるumaskコマンドの使用原理と計算方法の詳しい解説
目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...
フロントエンドのパフォーマンス最適化を学習するための準備として、HTML ページのレンダリング プロセスを理解する (続き)
昨夜、ブラウザのレンダリングプロセスに関するエッセイを書きましたが、小さなコードで説明しただけでした...
W3C が推奨するモバイル Web マークアップ言語 XHTML Basic 1.1
W3C は最近、「 XHTML Basic1.1 」と「 Mobile Web Best Prac...
mysql8.0.11をインストールしてrootパスワードを変更し、navicat for mysqlに接続するアイデアの詳細な説明
1.1. ダウンロード:公式ウェブサイトから zip パッケージをダウンロードします。私は 64 ビ...
一般的なCSS3アニメーションの実装方法
1. 何ですかCSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をア...
MySQL の 2 種類の一時テーブルの使用方法の詳細な説明
外部一時テーブルCREATE TEMPORARY TABLE によって作成された一時テーブルは、外部...
1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。
キーペアの分離1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。...