Javascript 如何使用Js使html元素反复出现和消失？

我正在处理我的公文包，我想添加一个动画箭头，邀请用户向下滚动。箭头将由2个块+箭头组成，我想对它们设置动画，如下所示： 第一个元素出现，然后是第二个元素（第一个元素淡出），然后是第三个元素（第一个元素再次出现，第二个元素淡出）。 我已经尝试过很多这样的脚本（只针对2个元素）：

您可以使用toggle（）函数。这会在隐藏和可见之间更改css属性。或者，也可以使用hide（）和show（）函数。为了进一步解决滚动属性问题，您可以执行以下操作：

var y = $('.selector').scrollTop(); //gives you the vertical scroll position
if(y%30 == 0) {
$('.arrowOne').toggle();
$('.arrowTwo').toggle();
}

---

这将为每30次滚动更改切换箭头。

我认为这最好是使用动画图像或CSS动画来寻址，而不是使用JavaScript动画一系列元素。因此，我将包括一个CSS示例，但也包括您要求的JavaScript示例

这里是CSS示例，关于CSS技巧讨论CSS动画如何工作（我不是专家）；请注意，我们设置了

不透明度

的动画，而不是

可见性

，CSS给了我们一个很好的放松效果（还有其他一些）：

@关键帧脉冲{
0%{不透明度：1}
50%{不透明度：0}
}
.街区{
背景颜色：蓝色；
宽度：20px；
高度：20px；
显示：内联块；
不透明度：0；
}
.区块1{
动画：脉冲2.4s无限；
}
.区块2{
动画：脉冲2.4s缓解0.8s无限；
}
.区块3{
动画：脉冲2.4s轻松1.6s无限；
}

---

您可以使用setInterval方法执行此操作：-

var interval=500,i=0;
setInterval(function(){
  i++;
   if (i % 2 !== 0) {
     document.getElementById('square1').style.visibility = 'visible';
     document.getElementById('square2').style.visibility = 'hidden';

   } else {
     document.getElementById('square1').style.visibility = 'hidden';
     document.getElementById('square2').style.visibility = 'visible';
   }
},interval);

如果希望它在到达页面上的某个点后变为活动状态，请使用if构造来验证页面的滚动顶部：-

if(document.body.scrollTop>=500){
  ...
  //do some stuff
}

---

javascript处理代码的速度如此之快，您将看不到任何结果。您需要添加延迟以使其工作是的，这就是我尝试添加睡眠功能的原因，关于在哪里可以找到添加工作延迟/睡眠功能的解决方案的任何提示？您需要设置间隔，而不是睡眠功能请查看此文档感谢您的链接，这可能是我需要的！感谢您的快速回复，我将尝试使用toggle（）重新编写函数，因为这似乎更合适。“我不使用jQuery，我想在使用框架之前深入Js”这有什么问题吗？你认为我应该使用JQuery来学习Js吗？很抱歉，我没有看到没有JQuery的部分。我一起学习了Js和JQuery。但这是个人的选择。没问题，艾伦，我是对T.J.克劳德说的话做出反应的。我知道jQuery非常有用和高效，但我希望在使用现有脚本之前能够首先编写自己的脚本。感谢您的回答，并提供了两种不同的解决方案，非常有用，CSS动画效果很好，非常感谢！我还将尝试Js脚本。它工作得非常好，感谢您和Alongkorn让我了解setInterval（）

var interval=500,i=0;
setInterval(function(){
  i++;
   if (i % 2 !== 0) {
     document.getElementById('square1').style.visibility = 'visible';
     document.getElementById('square2').style.visibility = 'hidden';

   } else {
     document.getElementById('square1').style.visibility = 'hidden';
     document.getElementById('square2').style.visibility = 'visible';
   }
},interval);

if(document.body.scrollTop>=500){
  ...
  //do some stuff
}