使用jquery连续显示单词

Question

我的页面有2列单词，总共20列，属于某个类（昏暗），每个都是唯一的ID。 '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秒钟。然后它消失，第2列中的第1个字显示2秒钟。然后单词2列1，然后单词2列2，依此类推。

由于

Answer 1

您不需要像 #wrd3 这样的ID来遍历元素列表。

我没有为您量身定制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（），或者您想要的任何其他动画。