使用jquery连续显示单词
我有一个页面,有 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 列,依此类推。
谢谢
I have a page that has 2 columns of words, 20 total, that are of a certain class (dim) and each a unique id. The ‘dim’ class defines the words as hidden. I have the following jQuery code running when I press a button:
$().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
}
});
});
When I uncomment the alert line I’m able to see that each word becomes visible and then hides again, just like it’s supposed to. The only problem is that it happens too fast. I want a way to make each loop wait a given number of nanoseconds. I’ve tried the setTimeout method but I can’t get it to do anything. Any idea how to slow this down? I’ve tried using .show and .hide but all the effects seem to happen at once.
My goal is to have the first word in column 1 display for 2 seconds. Then it goes away and word 1 in column 2 displays for 2 seconds. Then word 2 column 1, then word 2 column 2 and so on.
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您不需要像
#wrd3
这样的 ID 来逐步浏览元素列表。我没有为您定制 DOM 选择,但此代码将显示和隐藏集合中的每个项目,并在其间暂停。
.fadeIn
中的间隔表示该项目将在.fadeOut()
函数开始之前显示大约一段时间。当然,您可以将淡入淡出更改为
.show()
和.hide()
,或您想要的任何其他动画。You shouldn't need IDs like
#wrd3
to step through the list of elements.I haven't tailored the DOM selection for you, but this code will show and hide each item in a set, with a pause between. The interval in
.fadeIn
means the item will be showing for that about of time before the.fadeOut()
function starts.Of course, you can change the fades to
.show()
and.hide()
, or whatever other animation you want.