Question

我想设置jquery代码的延迟时间？我尝试下面的事情。

这是HTML标记：

<div class="fleft process" id="fade1" >
    <div class="dot-circle row m0">
        <div class="icon-circle row m0">
            <img src="img/people.png" alt="people" >
                <div class="row m0 hover-text">
                Smart Ideas<br>Steady Growth
                </div>
        </div>
   </div>
   <div class="row m0">1. People</div>

这是CSS：

#fade1 {
  position: relative;
  right: 0;
  opacity: 0;
  transition: all 0.5s linear;  
}

#fade1.on {
    opacity: 1;
}

这是jQuery代码：

$(function () {
  $(window).scroll(function () {
    if ($(window).scrollTop() > 2300)
      $("#fade1").delay(3000).addClass('on');
    else
      $("#fade1").removeClass('on');
  });
});

Answer 1

为什么不简单地使用Javascript setTimeout()方法？

$(function () {
  $(window).scroll(function () {
    if ($(window).scrollTop() > 2300){
      setTimeout(function(){
          $("#fade1").addClass('on');
      }, 3000);
    }else{
      $("#fade1").removeClass('on');
    }
  });
});

Answer 2

我猜你想延迟添加css类。您可以尝试使用javascript的 setTimeout（）方法：

$(function () {
  $(window).scroll(function () {
    if ($(window).scrollTop() > 2300){
      setTimeout($("#fade1").addClass('on'), 3000);
    } else {
      setTimeout($("#fade1").removeClass('on'), 3000);  
    } 
});
});

如何在jquery中设置延迟时间？

2 个答案: