我如何添加时间延迟到我的潜水，使他们出现一个接一个像幻灯片一样

How can I add a time delay to my divs, so they appear one after the other like a powerpoint slide?

本文关键字：一个 一样 幻灯片 他们 添加 何添加 时间 延迟 潜水 我的 迟到      更新时间：2023-09-26

假设我想让div 1在2秒后出现，div 2在7秒后出现，div 3在15秒后出现。

是否有一种方法可以让我添加一个内联样式元素，使div从隐藏但占用空间到完全可见。

我一直在搜索，我发现的大多数东西都是悬停/点击触发的。我好像找不到任何有时间触发器的东西。

谢谢。

编辑:为了使这更清楚，我正在寻找任何一种有时间延迟出现的代码。当我搜索过渡时，我得到一堆基于动作的代码，比如点击或悬停。我不是在寻找一个用户动作来触发这一点，只是一个时间。

当我搜索动画时，我得到一堆关于运动图像的结果，这也是我不需要的。

当我搜索时间延迟时，我得到了一堆关于时间延迟转换的结果，这是在用户动作发生多久之后，转换发生仍然需要用户输入，而我不想要用户输入。

我更多的是问我应该找什么，如果有一个词或你熟悉的东西，这样做。我没有提供任何代码，因为我不想让你给我写代码。我在寻求指引，因为我找不到合适的词来形容我需要什么，这让我很沮丧。

你可以在样式表中设置延迟后使用css过渡来动画可见性属性，或者你可以使用JS和setTimeout();

HTML 

<div id="div1" style="visibility:hidden;"></div>

JS 

setTimeout(function(){
document.getElementById('div1').style.visibility = "visible";
},1000);

设置一个回调，在1000毫秒或1秒后覆盖css属性。

对于一个纯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;
}

这个叫做fade-in的类为它所添加的元素添加了一个动画，它会在加载后立即启动。它是基于不透明度的，所以当物体不可见时，它会占用空间，如果你不想这样，你需要在显示上使用一个变量:none。

可以使用

为元素添加延迟
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;

只需为每个"幻灯片"设置不同的值，以使它们在不同的时间淡入

如果你想占用空间-意思是你不想让东西折叠起来，我会创建div，并将其设置为display为none，然后将opacity为0。这将隐藏元素，但它仍然会占用页面的物理空间。

然后我要创建一个css类名为"show"或类似的东西:

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;
}

然后用jQuery(或javascript)你可以使用setInterval，或setTimeOut。在超时函数中，可以动态地将"show"类分配给每个元素。这将使每个元素在你指定的"x"秒后淡出。

像这样:

jQuery: 

 $(function() {
     setTimeout(function(){
         showElement();
      }, 3000);
     function showElement() {
         $('my-div').toggleClass('show');
     }
  });
相关文章：