jqueryを使用して単語を連続して表示する
-
06-07-2019 - |
質問
特定のクラス(dim)であり、それぞれが一意のIDである、合計20個の単語の2列のページがあります。 ‘薄暗い’クラスは、単語を非表示として定義します。ボタンを押すと、次のjQueryコードが実行されます。
$().ready(function()
{
var x = 20; // will be dynamic later :-)
$("#btn1").click(function()
{
for(i=1 ; i <= x ; i++)
{
//alert(i);
$(".dim").removeClass("hilite");
// this 'turns off' all the words
$("#wrd-"+i).addClass("hilite");
// this turns on the i'th word
}
});
});
アラート行のコメントを外すと、各単語が表示されてから再び非表示になることがわかります。唯一の問題は、それが速すぎることです。各ループを特定のナノ秒数だけ待機させる方法が必要です。 setTimeoutメソッドを試しましたが、何もすることができません。これを遅くする方法はありますか? .showと.hideを使用してみましたが、すべての効果が同時に発生するようです。
私の目標は、列1の最初の単語を2秒間表示することです。その後、列2のワード1が2秒間表示されなくなります。次に、ワード2の列1、次にワード2の列2と続きます。
ありがとう
解決
要素のリストをステップ実行するために、#wrd3
などのIDは必要ありません。
DOMの選択を調整していませんが、このコードはセット内の各アイテムを表示および非表示にします。 .fadeIn
の間隔は、 .fadeOut()
関数が開始する前にアイテムが表示されていることを意味します。
var things = $('.foo');
var index = 0;
things.hide();
var showHide = function() {
things.eq(index).fadeIn(2000,function(){
$(this).fadeOut(2000);
});
index++;
setTimeout(showHide,3000);
};
showHide();
もちろん、フェードを .show()
および .hide()
、または他の任意のアニメーションに変更できます。
所属していません StackOverflow