jQuery を使用して、設定した間隔で Div を表示および非表示にするにはどうすればよいですか?

jQuery を使用して特定の時間間隔で Div を表示および非表示にする

jQuery の setInterval 関数を利用すると、事前定義された間隔で div を表示できますシーケンス内で可視性を制御します。関係する手順の詳細な概要は次のとおりです:

コードの実装:

HTML 構造を定義し、3 つの div (div1、div2、div3) を作成して非表示にすることから始めます。

<div>

JavaScript コードで、という関数を作成します。 showDiv() を使用して div の表示を制御します。この関数内で、カウンター変数を使用して div を反復処理し、一度に 1 つずつ表示します。

function showDiv() {...}

カウンターを初期化して現在の div を追跡し、jQuery stop() 関数を使用して進行中の div をキャンセルします。アニメーション。

var counter = 0;
$('div', '#container').stop().hide();

現在の div を表示するには、jQuery の filter() 関数を使用してカウンターに基づいて適切な div を選択し、それを表示します。 show('fast') を使用します。

.filter(function() {...}).show('fast');

最後の div に到達した後にシーケンスが確実に繰り返されるように、カウンターをインクリメントまたはリセットします。

counter == 3 ? counter = 0 : counter++;

最後に、setInterval を使用してタイマーを開始し、希望の時間間隔 (この場合は 5000 ミリ秒) を設定します。

var timer = setInterval(showDiv, 5000);

このソリューションは、柔軟な時間を提供します。また、特定の時間間隔で div を表示および非表示にするカスタマイズ可能な方法により、連続または時間指定の表示が必要なシナリオに適しています。

以上がjQuery を使用して、設定した間隔で Div を表示および非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。