usando jquery para palavras de exibição consecutiva

Question

Eu tenho uma página que tem 2 colunas de palavras, o total de 20, que são de uma certa classe (fraca) e cada uma identificação única. A classe ‘dim’ define as palavras como oculto. Eu tenho o seguinte código jQuery execução quando eu pressionar um botão:

$().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
          }
      });
  });

Quando eu remover o comentário da linha de alerta eu sou capaz de ver que cada palavra torna-se visível e, em seguida, se esconde de novo, como é suposto. O único problema é que isso acontece muito rápido. Eu quero uma maneira de fazer cada loop esperar um determinado número de nanossegundos. Eu tentei o método setTimeout, mas eu não posso obtê-lo para fazer qualquer coisa. Alguma idéia de como desacelerar isso? Eu tentei usar .mostrar e .hide mas todos os efeitos parece acontecer ao mesmo tempo.

Meu objetivo é ter a primeira palavra na coluna 1 exibição por 2 segundos. Em seguida, ele vai embora e palavra 1 na coluna 2 exibe durante 2 segundos. Então palavra 2 coluna 1, então palavra 2 coluna 2 e assim por diante.

Graças

Answer 1

Você não deve precisar IDs como #wrd3 para percorrer a lista de elementos.

Eu não adaptado a seleção DOM para você, mas este código irá mostrar e ocultar cada item em um conjunto, com uma pausa entre. O intervalo em .fadeIn significa que o item estará mostrando para que cerca de tempo antes que a função .fadeOut() começa.

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();

Claro, você pode alterar as fades para .show() e .hide(), ou qualquer outra animação que quiser.