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：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我编写了以下脚本，其中有效：

setTimeout( "jQuery('#readmoreArrow').addClass('show');",3000 );

jQuery(window).scroll(function() {
      jQuery('#readmoreArrow').addClass("hide");  
     });

Answer 3

使用队列方法（https://api.jquery.com/queue/）将函数调用与延迟一起放入队列。

$('.readmoreArrow').delay(2000)
                   .queue(function(next){
                     $(this).addClass('show');
                   })

$(window).scroll(function () {
  $('.readmoreArrow').removeClass('show');
});

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

3 个答案: