jquery - JQuery 淡入然后淡出延迟 - 不工作

Question

我试图让一些文本淡入淡出，然后在延迟后再次淡出。但是，我也想延迟淡入。

我知道这可以用 CSS 关键帧来完成吗？但我不知道如何开始，我研究的所有内容都只是一个动画（动画）。

因此，我在 JQuery 中尝试这个：

$(document).ready(() => {

    $(window).on('load', () => {
        $('.helper').delay(3000).fadeIn(); {
            $(this).delay(6000).fadeOut();
        }
    });

});

而这个 HTML/CSS：

<section class="helper" style="display: none;">
    <h2 id="helper">Filler Text</h2>
</section>

标签： jqueryhtml

Answer 1

对于这种任务，最好使用简单的 CSS 动画

.helper { 
  opacity: 0; 
  animation: fade 10s;
  will-change: opacity; }

@keyframes fade {
  60%, 100% { opacity: 0;}
  70%, 90%  { opacity: 1 }
}