использование jquery для последовательного отображения слов

Question

У меня есть страница с двумя столбцами слов, всего 20, которые относятся к определенному классу (тусклому), и каждый имеет уникальный идентификатор.Класс «dim» определяет слова как скрытые.У меня есть следующий код jQuery, когда я нажимаю кнопку:

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

Когда я раскомментирую строку предупреждения, я вижу, что каждое слово становится видимым, а затем снова скрывается, как и должно быть.Единственная проблема в том, что это происходит слишком быстро.Мне нужен способ заставить каждый цикл ждать заданное количество наносекунд.Я попробовал метод setTimeout, но не смог заставить его что-либо сделать.Есть идеи, как это замедлить?Я пробовал использовать .show и .hide, но кажется, что все эффекты происходят одновременно.

Моя цель — чтобы первое слово в столбце 1 отображалось в течение 2 секунд.Затем оно исчезает, и слово 1 в столбце 2 отображается в течение 2 секунд.Затем слово 2 столбец 1, затем слово 2 столбец 2 и так далее.

Спасибо

Answer 1

Вам не нужны такие идентификаторы, как #wrd3 для перемещения по списку элементов.

Я не настраивал для вас выбор DOM, но этот код будет показывать и скрывать каждый элемент в наборе с паузой между ними.Интервал в .fadeIn означает, что элемент будет отображаться примерно за это время до .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();

Конечно, вы можете изменить затухание на .show() и .hide(), или любую другую анимацию, которую вы хотите.