jQueryアニメーションを理解するのに役立つ記事

jQueryアニメーションを理解するのに役立つ記事
jQueryは、要素の表示と非表示を制御するためのデフォルトのアニメーションをいくつか提供しています: show() hide()
	要素の透明度を制御する fadeIn() fadeOut()
	要素の高さを制御する slideUp() slideDown()
	カスタムアニメーション animate()

1. 要素の表示と非表示を制御する show() hide()

文法:

 $("セレクタ").show([速度],[コールバック]);

参照説明:

パラメータ 1 : 速度、オプション、例: 1000 ミリ秒、1 秒、高速、低速、通常

パラメータ 2 : コールバック関数、表示または非表示関数の実行後に実行されるオプション関数

$(関数() {
			$(".nav-ul li").on({"mouseover":function () {
					$(this).css("背景","ピンク")
				},"mouseout":関数(){
					$(this).css("背景","#ff2832")
				}});
			$(".menu-btn").hover(関数() {
				$(this).next().show("高速")
			}、関数 () {
				$(this).next().hide("遅い")
			})
		})

2. 要素の透明度を制御する fadeIn() fadeOut()

文法:

    $("セレクタ").fadeIn([速度],[コールバック]);
    $("セレクタ").fadeOut([速度],[コールバック]);

参照説明:

パラメータ 1 : 速度、オプション、デフォルトは 0、例: 1000 ミリ秒など、1 秒は速い、遅い、通常

パラメータ 2 : コールバック関数 (オプション)。fadeIn または fadeOut の実行後に実行される関数。

$(関数() {
		$("input[name='fadein_btn']").click(function () {
			$("img:eq(0)").fadeIn(500,function() {
				alert("フェードインに成功しました")
			})
		})
		$("input[name='fadeout_btn']").click(function () {
			$("img:eq(0)").fadeOut(1000,function() {
				alert("フェードアウトに成功しました")
			})
		})
	})

3: 要素の高さを制御する slideUp() slideDown()

slideDown()は要素を徐々に拡張して表示します

slideUp()は要素を徐々に短くして非表示にします。

文法:

    $("セレクタ").slideUp([速度],[コールバック]);
    $("セレクタ").slideDown([速度],[コールバック]);

参照説明:

パラメータ 1: 速度、オプション、デフォルトは 0、例: 1000 ミリ秒など、1 秒は高速、低速は正常

パラメータ 2: コールバック関数 (オプション)。slideUp または slideDown の実行後に実行される関数。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • jQueryは広告の表示と非表示のアニメーションを実装します
  • jQueryアニメーション操作の完全な例の分析
  • JQuery アニメーション アプリケーションの例
  • JQueryの基本的なアニメーション操作の詳細な説明
  • [jQuery] イベントとアニメーションの詳しい説明

<<:  CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。

>>:  IE のテキストモード! DOCTYPE の役割の紹介

推薦する

CSS継承方法

次の背景画像を持つ div があるとします。 次の反射効果を作成します。 方法はたくさんありますが、...

Springboot+Vue-Cropperでアバターの切り取りとアップロードの効果を実現

アバターをアップロードするにはVue-Cropperコンポーネントを使用します。参考までに具体的な内...

Vueは小さなメモ帳機能を実装しました

この記事の例では、メモ帳の小さな機能を実現するためのvueの具体的なコードを参考までに共有しています...

HTML の水平および垂直中央揃えの問題の概要

最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...

SQL 最適化チュートリアル: IN クエリと RANGE クエリ

序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...

Docker を使用して Microsoft Sql Server を展開するための詳細な手順

目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...

Mysql マスタースレーブ サービスの実装例を構成する

Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...

Linux で Xfce デスクトップ環境を使用すべき 8 つの理由

いくつかの理由(好奇心も含む)から、数週間前に Linux デスクトップとして Xfce を使い始め...

Linux でバックグラウンドで実行中のプログラムを表示して終了する方法

1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...

Linux で毎日データベースの自動バックアップを設定する方法

この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...

HTML における Div と table の違い (あらゆる側面から詳細に説明)

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

HTML ul および li タグを使用して画像を表示するサンプル コード

以下のコードをDreamweaverのコードエリアにコピーすると、プレビュー時に以下の画像が表示され...

MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項

MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...

HTML で入力プロンプトのテキスト スタイルを変更するためのサンプル コード

多くのウェブサイトでは、入力ボックスにヒントテキストが表示されています。入力ボックスにヒントテキスト...