jquery - 在 x 秒后添加类并在滚动时删除类

Question

我希望在 2 秒后(页面加载后)将一个类添加到 .readmoreArrow，然后一旦用户滚动该类就会被删除。

我编写了以下 jQuery:

$('.readmoreArrow').delay(2000, function() {
    setTimeout(function() {
            $(this).addClass('show');
        }, 2000);
});
$(window).scroll(function () {
    $('.readmoreArrow').removeClass('show');
});

这是我的 HTML:

<div class="homepagearrow">
    <a href="#component" class="readmoreArrow">scroll for more<span></span></a>
</div>

但它似乎不起作用。该类不会添加到 .readmoreArrow

控制台中显示以下错误:

TypeError: $(...) is null
$('.readmoreArrow').delay(2000, function() {

有什么想法我哪里出错了吗？

Answer 1

尝试仅使用setTimeout:

$(window).load(function() {
  setTimeout(function() {
      $('.readmoreArrow').addClass('show');
    }, 2000)
})
$(window).scroll(function() {
  $('.readmoreArrow').removeClass('show');
});

body {
  height:2000px;
}
.readmoreArrow {
  position:fixed;
  width:100%;
  height: 50px;
  background: blue;
  transition: 1s all ease;
}
.show {
  background: orange;
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="readmoreArrow"></div>