ホームページ > 記事 > ウェブフロントエンド > jqueryでdivフェード効果を実現する方法
3 つの実装方法: 1. fadeOut() を使用して、構文 "element object.fadeIn (フェードイン期間)" を使用して、選択した要素の不透明度を表示から非表示に徐々に変更します。2. fadeTo を使用します。 () 選択した要素の不透明度を段階的に変更します。構文は「element object.fadeTo(fadeduration, 0)」です。 3. fadeToggle() を使用して、選択した要素の不透明度を段階的に変更します。構文は「element object.fadeTo(fadeduration, 0)」です。 fadeToggle(フェード持続時間) 。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。
jquery では、div のフェード効果を実現するメソッドが 3 つあります。
fadeOut() メソッド
fadeToggle () メソッド
fadeTo() メソッド
##1、fadeOut() メソッド
fadeOut ( ) メソッドは、選択した要素の不透明度を表示から非表示 (フェード効果) に徐々に変更します。 構文:$(selector).fadeOut(speed,easing,callback)
説明 | |
---|---|
speed | オプション。フェード効果の速度を指定します。可能な値:
|
緩和##オプション。アニメーション内のさまざまなポイントでの要素の速度を指定します。デフォルト値は「スイング」です。 | 可能な値:
「swing」 - 最初と最後ではゆっくりと動き、中間では速く動きます
|
オプション。 fadeOut()メソッドの実行後に実行されるコールバック関数。 | #例: |
構文:
$(selector).fadeTo(speed,opacity,callback);必須の速度パラメーターは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
$(document).ready(function() { $("button").click(function() { $("#div1").fadeTo("fast",0); $("#div2").fadeTo("slow",0); $("#div3").fadeTo(3000,0); }); });
fadeToggle() は、要素が非表示の場合にフェードイン効果を要素に追加します。
$(document).ready(function() { $("button").click(function() { $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(5000); }); });
、Web フロントエンド
]以上がjqueryでdivフェード効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。