en utilisant jquery pour afficher les mots consécutivement

Question

J'ai une page qui a 2 colonnes de mots, 20 totaux, qui sont d'une certaine classe (dim) et chacun un id unique. La classe 'dim' définit les mots comme cachés. J'ai le code jQuery suivant 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 
      } 
     }); 
    }); 

Quand je décommenter la ligne d'alerte, je suis en mesure de voir que chaque mot devient visible et se cache à nouveau, tout comme il est censé. Le seul problème est que cela arrive trop vite. Je veux un moyen de faire attendre chaque boucle un nombre donné de nanosecondes. J'ai essayé la méthode setTimeout mais je n'arrive pas à faire quoi que ce soit. Une idée de comment ralentir ça? J'ai essayé d'utiliser .show et .hide mais tous les effets semblent se produire à la fois.

Mon but est d'afficher le premier mot de la colonne 1 pendant 2 secondes. Puis il disparaît et le mot 1 de la colonne 2 s'affiche pendant 2 secondes. Puis mot 2 colonne 1, puis mot 2 colonne 2 et ainsi de suite.

Merci

Answer 1

Vous ne devriez pas avoir ID 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 les deux. L'intervalle en .fadeIn signifie que l'élément sera affiché pendant environ le temps avant le début 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 changer les Fondus à .show() et .hide(), ou tout autre animation que vous voulez.