usando jquery para mostrar palabras consecutivamente

Question

Tengo una página que tiene 2 columnas de palabras, 20 en total, que son de cierta clase (tenue) y cada una es una identificación única. El & # 8216; dim & # 8217; La clase define las palabras como ocultas. Tengo el siguiente código jQuery ejecutándose cuando presiono un botón:

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

Cuando descomento la línea de alerta, puedo ver que cada palabra se hace visible y luego se oculta de nuevo, tal como se supone que debe hacerlo. El único problema es que sucede demasiado rápido. Quiero una forma de hacer que cada ciclo espere un número determinado de nanosegundos. He probado el método setTimeout pero no puedo hacer que haga nada. ¿Alguna idea de cómo frenar esto? He intentado usar .show y .hide, pero todos los efectos parecen suceder a la vez.

Mi objetivo es que la primera palabra en la columna 1 se muestre durante 2 segundos. Luego desaparece y aparece la palabra 1 en la columna 2 durante 2 segundos. Luego la palabra 2 columna 1, luego la palabra 2 columna 2 y así sucesivamente.

Gracias

Answer 1

No debería necesitar identificadores como # wrd3 para recorrer la lista de elementos.

No he adaptado la selección DOM para usted, pero este código mostrará y ocultará cada elemento en un conjunto, con una pausa entre ellos. El intervalo en .fadeIn significa que el elemento se mostrará durante ese tiempo antes de que se inicie la función .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();

Por supuesto, puede cambiar los fundidos a .show () y .hide () , o cualquier otra animación que desee.