Могу ли я передать атрибут из элемента HTML в функцию JQuery .delay ()?

Question

Я пытаюсь задержать появление текста на странице (на самом деле в шпагате - https://twinery.org/) на величину, определенную в атрибутах объекта span следующим образом:

$(".fadeIn").each(function() {
  alert(parseInt($(this).attr("fadeInAfter")))
});

$(".fadeIn").delay(parseInt($(this).attr("fadeInAfter"))).fadeIn(1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="hide fadeIn" fadeInAfter="1000">This should fade in after 1 second</span>

<span class="hide fadeIn" fadeInAfter="5000">This should fade in after 5 seconds</span>

С этим кодом окна предупреждений запускаются с правильными значениями, но интервалы исчезают немедленно.

Это то, что я пытаюсь сделать возможно? Я поступаю неправильно?

Спасибо,

Answer 1

Существует очень важное различие между вашим кодом, где вызывается alert(), и кодом, в котором вы устанавливаете задержку: метод .each() вызывает вашу функцию обратного вызова для каждого <span> в отдельности. Вот почему получение значения атрибута работает. В вашем вызове .delay() код оценивается с this, установленным на то, чем он является в контексте вызова.

Это легко исправить: выполните ваши .delay() вызовы также в .each() обратном вызове:

$(".fadeIn").each(function() {
  $(this).delay(parseInt($(this).attr("fadeInAfter"))).fadeIn(1000);
});