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 でホームディレクトリを新しいパーティションに移行する詳細なチュートリアル
推薦する
CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法
問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...
CSS カウンターを使用して数字の順序付きリストを美しく表示する方法
Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できる...
Vue.js ドロップダウン コンポーネント付きテキストボックス
ドロップダウン付きのテキストボックスを使用すると、ユーザーはドロップダウン リストから入力を選択した...
JS を使って CSS3 で丸い角を実装する方法
IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...
モバイル開発チュートリアル: ピクセル表示の問題の概要
序文モバイル端末の開発の過程で、モバイル端末のディスプレイはデスクトップ端末のディスプレイとは一般的...
HTML+CSS+JS でスタックカルーセル効果を実装するサンプルコード
効果：スライドショーが一方向に動く場合、各画像のサイズ、位置、透明度、レベルを変更する必要があります...
CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明
1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...
Dockerプライベートライブラリの実装
プライベート Docker レジストリのインストールとデプロイは、Docker テクノロジーを導入、...
Vue コンポーネント ライブラリ ElementUI はテーブル読み込みツリー データのチュートリアルを実装します
ElementUIは、参考のためにテーブルツリーリストの読み込みチュートリアルを実装しています。具体...
MySQL の文字セット utf8 を utf8mb4 に変更する方法
MySQL 5.5 の場合、文字セットが設定されていない場合、MySQL のデフォルトの文字セットは...
MySQL5.6 GTIDモードで同期レプリケーションエラーをスキップできない問題の解決方法
データベースバージョン: mysql> select version(); +--------...
Docker に influxdb をインストールするための詳細なチュートリアル (パフォーマンス テスト)
1. 前提条件1. プロジェクトが展開されました2. Dockerはすでにインストールされている2...
Docker はすべてのコンテナをバッチ起動して閉じます
Dockerの場合すべてのコンテナコマンドを開始する docker を起動します $(docker ...
Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します
目次Viteプロジェクトを作成するコンポーネントの作成Viteプロジェクトを作成するパフォーマンスが...
PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト
序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...