usando jquery per visualizzare le parole in sequenza

Question

Ho una pagina che ha 2 colonne di parole, 20 in totale, che sono di una certa classe (fioca) e ognuna un ID univoco. L'& # 8216; dim & # 8217; la classe definisce le parole come nascoste. Ho il seguente codice jQuery in esecuzione quando premo un pulsante:

$().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 rimuovo il commento sulla linea di avviso sono in grado di vedere che ogni parola diventa visibile e poi si nasconde di nuovo, proprio come dovrebbe supporre. L'unico problema è che succede troppo in fretta. Voglio un modo per far aspettare ogni ciclo per un determinato numero di nanosecondi. Ho provato il metodo setTimeout ma non riesco a farlo fare nulla. Qualche idea su come rallentare questo? Ho provato a usare .show e .hide ma tutti gli effetti sembrano accadere contemporaneamente.

Il mio obiettivo è di visualizzare la prima parola nella colonna 1 per 2 secondi. Quindi scompare e la parola 1 nella colonna 2 viene visualizzata per 2 secondi. Quindi parola 2 colonna 1, quindi parola 2 colonna 2 e così via.

Grazie

Answer 1

Non dovresti avere bisogno di ID come # wrd3 per scorrere l'elenco degli elementi.

Non ho personalizzato la selezione DOM per te, ma questo codice mostrerà e nasconderà ogni elemento in un set, con una pausa tra. L'intervallo in .fadeIn indica che l'elemento verrà visualizzato per tale periodo prima dell'avvio della funzione .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();

Ovviamente, puoi cambiare la dissolvenza in .show () e .hide () , o qualunque altra animazione tu voglia.