используя jquery для последовательного отображения слов - PullRequest
Новая
       18

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

1 голос
/ 27 октября 2009

У меня есть страница, которая имеет 2 столбца слов, всего 20, которые относятся к определенному классу (dim) и имеют уникальный идентификатор. Класс "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 и т. Д.

Спасибо

1 Ответ

1 голос
/ 27 октября 2009

Вам не нужны идентификаторы, такие как #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() или любую другую анимацию, какую захотите.

...