javascript 如何为我的 div 添加时间延迟，使它们像幻灯片一样一个接一个地出现？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24939347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add a time delay to my divs, so they appear one after the other like a powerpoint slide?
提问by user3784334
So say I want div 1 to appear after 2 seconds, div 2 to appear after 7 seconds, and div 3 to appear after 15 seconds.
所以说我希望 div 1 在 2 秒后出现，div 2 在 7 秒后出现，div 3 在 15 秒后出现。
Is there a way for me to add an inline style element that will make the divs go from hidden but occupying space to fully visible.
有没有办法让我添加一个内联样式元素，使 div 从隐藏但占用空间变为完全可见。
I've been searching and most things I've found are hover/click triggered. I can't seem to find anything with a time trigger.
我一直在搜索，我发现的大多数东西都是悬停/点击触发的。我似乎找不到任何带有时间触发器的东西。
Thank you.
谢谢你。
Edit: To make this more clear, I am looking for any kind of code that has a time delay to appear. When I search transition, I get a bunch of code based on actions, like a click or a hover. I am not looking for a user action to trigger this, just a time.
编辑：为了更清楚地说明这一点，我正在寻找任何一种出现时间延迟的代码。当我搜索 transition 时，我会得到一堆基于动作的代码，比如点击或悬停。我不是在寻找用户操作来触发这个，只是一个时间。
When I search for animation, I get a bunch of results about moving images, which I also do not need.
当我搜索动画时，我会得到一堆关于运动图像的结果，我也不需要这些结果。
When I search for time delay, I get a bunch of results about time delay transitions, which is how long after the user action occurs does the transition occur which still requires user input, and I do not want user input.
当我搜索 time delay 时，我得到了一堆关于 time delay transitions 的结果，即用户操作发生后多久发生仍然需要用户输入的转换，而我不想要用户输入。
I am more asking what I should be looking for, if there is a word for it or something you are familiar that does this. I didn't provide any code because I don't want you coding me something. I'm asking for lead, because it is frustrating that I cannot find the proper word to identify what I need.
我更多的是问我应该寻找什么，是否有一个词或你熟悉的东西可以做到这一点。我没有提供任何代码，因为我不希望你给我编码一些东西。我要求铅，因为令人沮丧的是我找不到合适的词来确定我需要什么。
回答by nepeo
you can either use a css transition to animate the visibility property after a set delay in your stylesheet, or you can change the visibility property using JS and setTimeout();
您可以使用 css 过渡在样式表中设置延迟后为可见性属性设置动画，也可以使用 JS 和 setTimeout() 更改可见性属性；
HTML
HTML
<div id="div1" style="visibility:hidden;"></div>
JS
JS
setTimeout(function(){
document.getElementById('div1').style.visibility = "visible";
},1000);
This sets a callback to override the css property after 1000 ms, or 1 second.
这将设置回调以在 1000 毫秒或 1 秒后覆盖 css 属性。
For a pure css solution we can use this instead. We need to provide multiples of a few properties, for cross platform compatibility.
对于纯 css 解决方案，我们可以改用它。我们需要提供一些属性的倍数，以实现跨平台兼容性。
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
So this class called fade-in adds a 1s animation to any element it's added to, it will start as soon as it's loaded as it is. It's opacity based so the object will take up space when it's invisible, if you don't want this you need to use a variation on display:none.
所以这个叫做淡入的类向它添加的任何元素添加一个 1s 动画，它会在加载后立即开始。它是基于不透明度的，所以当对象不可见时，它会占用空间，如果你不想要这个，你需要在 display:none 上使用一个变体。
A delay can be added to an element using
可以使用以下方法将延迟添加到元素
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
Just set that with a different value for each 'slide' to get them to fade in at different times.
只需为每个“幻灯片”设置不同的值，让它们在不同的时间淡入。
回答by Damon
If you want the space taken up - meaning you don't want things collapsed up, I would create the div, and set it's displayto none, and then the opacityto 0. This will hide the element, but it will still take up physical space on your page.
如果您想要占用空间 - 意味着您不希望事情折叠起来，我会创建 div，并将其设置display为none，然后设置opacity为0。这将隐藏元素，但它仍会占用页面上的物理空间。
Then I would create a css class called "show" or something like that:
然后我会创建一个名为“show”或类似的 css 类：
CSS:
CSS：
.show {
opacity: 1;
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
Then with jQuery (or javascript) you could use either setInterval, or setTimeOut. In your timeout function, you could dynamiclly assign the "show" class to each element. This would fade each element in after "x" seconds you specify.
然后使用 jQuery（或 javascript），您可以使用setInterval或setTimeOut。在您的超时函数中，您可以动态地将“show”类分配给每个元素。这将在您指定的“x”秒后淡入每个元素。
Something like this:
像这样的东西：
jQuery:
jQuery：
$(function() {
setTimeout(function(){
showElement();
}, 3000);
function showElement() {
$('my-div').toggleClass('show');
}
});
