使用jQuery連續顯示文字

Question

我有一個頁面，有2列的文字，總數20，是一個特定的類（昏暗），每個唯一的ID。 '昏暗'類將單詞定義爲隱藏。我有以下的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

你不應該需要ID，如#wrd3來逐步元素的列表。

我還沒有爲您量身定製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()，或任何其他動畫你想要的。