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 でホームディレクトリを新しいパーティションに移行する詳細なチュートリアル
推薦する
Docker-compose を使用して ELK クラスターを構築する方法
すべてのオーケストレーション ファイルと構成ファイルは、私の Github からアクセスできます。構...
jQueryブリージングカルーセルの制作原理を詳しく解説
この記事では、jQueryブリージングカルーセル制作原理の具体的なプロセスを参考までに紹介します。具...
Win10 の Linux サブシステムを有効にする方法を説明します (詳細な画像とテキスト付き)
今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...
MySQL ストアド プロシージャで月ごとにテーブルを作成する方法
詳細には立ち入らずに、コードに直接進みましょう。一緒にコミュニケーションを取り、学びましょう。月ごと...
JSはjQueryのappend関数を実装します
目次コードを見せてください効果をテストする効果追伸別のアプローチコードを見せてください HTMLEl...
MySQL トリガー: 複数のトリガー操作の作成例の分析
この記事では、例を使用して、MySQL で複数のトリガー操作を作成する方法について説明します。ご参考...
CSSでプロセスナビゲーション効果を実現する（3つの方法）
CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip...
MySQL 5.7 でパスワードを変更する簡単な方法
これは公式のスクリーンショットです。MySQL 5.7 をインストールすると、デフォルトのパスワード...
Linux運用保守ツールSupervisor（プロセス管理ツール）のインストールと使用
1. はじめにSupervisor は Python で開発された汎用プロセス管理プログラムです。通...
WeChat 8.0の爆発的な特殊効果を実現するために300行以上のCSSコードが必要
WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...
CSS スティッキーフッター実装コード
この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。...
mysql エラー 1045 (28000) - ユーザーへのアクセスが拒否される問題を解決する方法
問題の説明 (以下の説明は Windows 環境に限定されます): D:\develop\ide\m...
エラー 1862 (HY000): パスワードの有効期限が切れています。ログインするには、..... を使用してパスワードを変更する必要があります。
エラーメッセージ:エラー 1862 (HY000): パスワードの有効期限が切れています。ログインす...
Mybatis での動的 SQL ステートメント分析
この記事は主にMybatisでの動的SQL文の解析について紹介します。この記事のサンプルコードは非常...
ウェブページを作るときに注意すべき5つのポイント
1. 色合わせの問題<br />Web ページには 3 色以上使用しないでください。そう...