nacheinander mit Jquery Wörter anzuzeigen

Question

Ich habe eine Seite, die zwei Spalten von Wörtern hat, insgesamt 20, die einer bestimmten Klasse sind (dim) und jeder eine eindeutige ID. Die ‚Dim‘ Klasse definiert die Worte als versteckt. Ich habe folgende jQuery-Code läuft, wenn ich eine Taste drücken:

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

Wenn ich Kommentar- die Warnung Linie ich in der Lage bin, um zu sehen, dass jedes Wort sichtbar wird und dann wieder versteckt, so wie es angenommen hat. Das einzige Problem ist, dass es zu schnell passiert. Ich möchte eine Art und Weise jede Schleife eine bestimmte Anzahl von ns warten zu machen. Ich habe die Methode setTimeout versucht, aber ich kann es nicht alles zu tun bekommen. Jede Idee, wie diese zu verlangsamen? Ich habe versucht mit .show und .Hide aber alle Effekte scheinen auf einmal geschehen.

Mein Ziel ist es, das erste Wort in Spalte 1 Anzeige für 2 Sekunden zu haben. Dann geht es weg und Wort 1 in Spalte 2 zeigt für 2 Sekunden. Dann Wort 2 Spalte 1, dann Wort 2 Spalte 2 und so weiter.

Danke

Answer 1

Sie sollten nicht IDs müssen wie #wrd3 durch die Liste der Elemente zu treten.

Ich habe nicht die DOM-Auswahl für Sie zugeschnitten, aber dieser Code wird zeigen, und jedes Element in einem Satz verbergen, mit einer Pause dazwischen. Das Intervall in .fadeIn bedeutet, das Element wird für den über die Zeit, zeigt, bevor die .fadeOut() Funktion beginnt.

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

Natürlich können Sie die Überblendungen ändern .show() und .hide(), oder was auch immer andere Animation, die Sie wollen.