utiliser jquery pour afficher les mots consécutivement

Question

J'ai une page qui a 2 colonnes de mots, 20 au total, qui sont d'une certaine classe (dim) et chacune d'un identifiant unique. Le & # 8216; dim & # 8217; classe définit les mots comme cachés. Le code jQuery suivant est en cours d'exécution lorsque j'appuie sur un bouton:

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

Lorsque je supprime la mise en commentaire de la ligne d'alerte, je suis en mesure de constater que chaque mot devient visible, puis se cache à nouveau, exactement comme il est supposé. Le seul problème est que cela arrive trop vite. Je veux un moyen de faire chaque boucle attendre un nombre donné de nanosecondes. J'ai déjà essayé la méthode setTimeout, mais je ne peux pas le faire faire quoi que ce soit. Une idée de comment ralentir cela? J'ai essayé d'utiliser .show et .hide, mais tous les effets semblent se produire en même temps.

Mon objectif est d’afficher le premier mot de la colonne 1 pendant 2 secondes. Ensuite, le mot 1 de la colonne 2 s’affiche pendant 2 secondes. Ensuite, mot 2 colonne 1, puis mot 2 colonne 2 et ainsi de suite.

Merci

Answer 1

Vous n'avez pas besoin d'identifiants comme # wrd3 pour parcourir la liste des éléments.

Je n'ai pas personnalisé la sélection DOM pour vous, mais ce code affiche et masque chaque élément d'un ensemble, avec une pause entre. L'intervalle dans .fadeIn signifie que l'élément sera affiché pendant environ un certain temps avant le démarrage de la fonction .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();

Bien sûr, vous pouvez modifier les fondus en .show () et .hide () , ou toute autre animation de votre choix.