jqueryを使用して単語を連続して表示する

Question

特定のクラス（dim）であり、それぞれが一意のIDである、合計20個の単語の2列のページがあります。 ＆＃8216;薄暗い＆＃8217;クラスは、単語を非表示として定義します。ボタンを押すと、次の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と続きます。

ありがとう

Answer 1

要素のリストをステップ実行するために、＃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（）、または他の任意のアニメーションに変更できます。