フェデインとフェードアウトでjQuery写真スライドショーを作成します

このスクリーンキャストは、jQueryの

およびfadeInメソッドを使用してシンプルなスライドショーを作成することを示しています。 これらの方法は、要素の可視性に対する便利なアニメーション制御を提供し、CSS3だけよりも粒状制御を提供します。このビデオでは、手法を紹介し、それを他の方法と比較できます。 [YouTube PXyFlux7ibk]これは、学習可能で利用可能なコース「jQuery：Beyond the Basics」からの抜粋です。 fadeOut

よくある質問（FAQ）

スライドショーの停止：

スライドショーを停止するには、jqueryのメソッドを使用します。 これにより、ターゲット要素のアクティブなアニメーションがすぐに終了します。たとえば、

アニメーション速度の制御stop()$("#slideshow").stop();

パラメーターとして持続時間（ミリ秒単位）を指定して、および

の速度を調整します。 例：

（2秒のフェードイン）。fadeIn fadeOut$("#element").fadeIn(2000);遅延の追加：

jqueryのメソッドを使用して、アニメーション間に一時停止を導入します。 たとえば、

（フェードインとフェードアウトの間の2秒遅延）。

さまざまな要素を使用してdelay()$("#element").fadeIn().delay(2000).fadeOut();使用：

および

メソッドは画像に限定されません。要素が最初に隠されていれば（cssまたはjqueryの

メソッドを介して）、html要素（div、段落など）で動作します。 fadeInfadeOut連続ループの作成：hide()

継続的なループを実現するには、、、および

メソッドを組み合わせます。 この例は、フェードアウトした後、最初の画像を最後まで移動します：

fadeIn fadeOutend()画像キャプションの追加：

function loop() {
  $("#slideshow img").first().fadeOut().end().appendTo('#slideshow');
  setTimeout(loop, 3000);
}
loop();

内にデータ属性を使用してキャプションを含めます

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002191010970.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a jQuery Photo Slideshow with fadeIn and fadeOut ">ナビゲーションボタンの実装：

$("#slideshow img").fadeIn(function() {
  var caption = $(this).data('caption');
  $("#caption").text(caption);
});

ボタンを作成し、jQueryを使用してクリックハンドラーを添付します。 これらのハンドラーは、およびを使用して、次または以前の画像を表示できます。 例（simpliefified）：

fadeInfadeOut背景画像：

$("#prev").click(function() { /* Move first image to beginning */ });
$("#next").click(function() { /* Move first image to end */ });

不透明度が要素全体に影響を与えるため、

/を背景画像に直接適用することは不可能です。 ただし、Divに背景画像を包み、Divをフェードすることで、同様の効果を達成できます。

クロスフェード：

fadeIn クロスフェード効果のために次の画像をフェードしながら、1つの画像を同時にフェードアウトします。 これには、多くの場合、画像の絶対的な位置決めが必要です fadeOut

jQueryの代替手段：

CSSトランジションは、より手動コーディングが必要ですが、jQueryのない代替品を提供します。 例（simpliefified）：

function loop() {
  $("#slideshow img").first().fadeOut().end().appendTo('#slideshow');
  setTimeout(loop, 3000);
}
loop();

この拡張された応答は、各FAQのより詳細な説明とコード例を提供します。

以上がフェデインとフェードアウトでjQuery写真スライドショーを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。