Question

我想做的是创建一个函数，该函数将根据是否显示每个元素来更改每个元素的延迟。

当前已对延迟进行硬编码，这意味着如果用户不选择连接任何子标题文本，它们将等待一秒钟的延迟。

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

下面是我的代码段。

 RemoveElements();

    $('#header').delay(1500).animate({'opacity': [1, "linear"]}, 500);
    $('#subheader1').delay(2000).animate({'opacity': [1, "linear"]}, 500);
    $('#text1').delay(2500).animate({'opacity': [1, "linear"]}, 500);
    $('#subheader2').delay(3000).animate({'opacity': [1, "linear"]}, 500);
    $('#text2').delay(3500).animate({'opacity': [1, "linear"]}, 500);
    $('#subheader3').delay(4000).animate({'opacity': [1, "linear"]}, 500);
    $('#text3').delay(4500).animate({'opacity': [1, "linear"]}, 500);

    function RemoveElements() { //REMOVE TEXT
      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');
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="header">Header</h1>
<h2 id="subheader1" class="moveSub1">Subheader1</h2>
<p id="text1" class="movePara1">Text 1</p>
<h2 id="subheader2" class="moveSub2">none</h2>
<p id="text2" class="movePara2">Text 2</p>
<h2 id="subheader3" class="moveSub3">none</h2>
<p id="text3" class="movePara3">none</p>

谢谢您的帮助：）

Answer 1

我给你弄了个小提琴。我希望这是您想要的。 https://jsfiddle.net/wk2erc5q/

我将一些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元素中没有data-delay标签的情况下工作。只需在let animationTime = 500函数的开头设置RemoveElements()，然后在声明您可以animationTime = animationTime + 500;

https://jsfiddle.net/589xp4tf/

延迟取决于填充哪些元素

1 个答案: