使用jquery连续显示单词答案

【问题标题】：using jquery to display words consecutively使用jquery连续显示单词
【发布时间】：2009-10-27 16:55:26
【问题描述】：

我有一个页面，有 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 列，依此类推。

谢谢

【问题讨论】：

标签： javascript jquery timer hide show

【解决方案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()，或者您想要的任何其他动画。

【讨论】：