Javascript 延迟取决于填充的元素

我想做的是创建一个函数，根据是否显示每个元素来改变它们的延迟

延迟目前是硬编码的，这意味着如果用户不选择连接任何分标题文本，它们将等待一秒钟的延迟

我已经环顾四周，但没有找到任何类似的东西，任何建议将不胜感激

下面是我的代码片段

removeements（）；
$（'#header'）.delay（1500）。动画（{'opacity'：[1，“linear”]}，500）；
$（#副标题1'）。延迟（2000）。动画（{'opacity'：[1，“linear”]}，500）；
$（'#text1'）.delay（2500）。动画（{'opacity'：[1，“linear”]}，500）；
$（#副标题2'）。延迟（3000）。动画（{'opacity'：[1，“linear”]}，500）；
$（'#text2'）。延迟（3500）。动画（{'opacity'：[1，“linear”]}，500）；
$（#副标题3'）。延迟（4000）。动画（{'opacity'：[1，“linear”]}，500）；
$（'#text3'）。延迟（4500）。动画（{'opacity'：[1，“linear”]}，500）；
函数RemoveElements（）{//删除文本
if（$（'#header'）[0].innerHTML=='none'）$（'#header'）.css（'display'，'none'）；
if（$（'subheader1'）[0].innerHTML=='none'）$（'subheader1'）.css（'display'，'none'）；
if（$（'#text1'）[0].innerHTML=='none'）$（'#text1'）.css（'display'，'none'）；
if（$（'#subheader2'）[0].innerHTML=='none'）$（'#subheader2'）.css（'display'，'none'）；
if（$（'#text2'）[0].innerHTML=='none'）$（'#text2'）.css（'display'，'none'）；
if（$（'#subheader3'）[0].innerHTML=='none'）$（'#subheader3'）.css（'display'，'none'）；
if（$（'#text3'）[0].innerHTML=='none'）$（'#text3'）.css（'display'，'none'）；
}

标题
分目1
文本1

没有一个
文本2

没有一个
没有

我给你做了一把小提琴。我希望这就是你想要的。

我将一些js内容外包到HTML中，因此js现在看起来像这样：

RemoveElements();

function RemoveElements() { 
  $('.check-element').each(function(){
    let element = $(this);
    if(element.html() == 'none'){
      setTimeout((function() {
       element.animate({'opacity': [0, "linear"]}, 500);
      }), element.attr('data-delay'));
    }
  });
}

如果要将元素设置为

display:none

，而不仅仅是

opacity:0

（因为它们仍然需要空间），只需将设置超时中的行替换为

element.hide（）

当动画时间总是增加500时，您甚至可以在HTMl元素中不使用
数据延迟
标记。只需在
RemoveElements（）
函数的开头设置
let animationTime=500
，然后在if语句之后，就可以执行
animationTime=animationTime+500


尝试添加
。在
之前停止（真，真）
。延迟
@darklightcode谢谢你，伙计，但这还没有起作用。我正在寻找文本仍然淡入，但忽略仍然“无”的任何文本。因此延迟将跳过“无”元素，直接进入下一个元素。@Eddie检查第二个小提琴谢谢大副，太好了！