1

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

谢谢

4

1 回答 1

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()and .hide()，或您想要的任何其他动画。

于 2009-10-27T17:29:25.613 回答