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()
文法: $("セレクタ").slideUp([速度],[コールバック]); $("セレクタ").slideDown([速度],[コールバック]); 参照説明: パラメータ 1: 速度、オプション、デフォルトは 0、例: 1000 ミリ秒など、1 秒は高速、低速は正常 パラメータ 2: コールバック関数 (オプション)。slideUp または slideDown の実行後に実行される関数。 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。
>>: IE のテキストモード! DOCTYPE の役割の紹介
次の背景画像を持つ div があるとします。 次の反射効果を作成します。 方法はたくさんありますが、...
アバターをアップロードするにはVue-Cropperコンポーネントを使用します。参考までに具体的な内...
この記事の例では、メモ帳の小さな機能を実現するためのvueの具体的なコードを参考までに共有しています...
最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...
序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...
目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...
Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...
いくつかの理由(好奇心も含む)から、数週間前に Linux デスクトップとして Xfce を使い始め...
1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...
この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...
1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...
以下のコードをDreamweaverのコードエリアにコピーすると、プレビュー時に以下の画像が表示され...
MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...
目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...
多くのウェブサイトでは、入力ボックスにヒントテキストが表示されています。入力ボックスにヒントテキスト...