javascript - 使用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()，或您想要的任何其他动画。