延迟jQuery中的点击功能

Question

我有一个单击功能，当单击链接时，会向下滚动到附加的div。如何在实际向下滚动之前附加大约5秒的延迟？

我试图将.delay（）添加到函数中，但它似乎不起作用

$(".o-c").click(function() {
  $('html, body').animate({
    scrollTop: $(".one").offset().top
  }, 2000);
});

.left {
  width: 50%;
  float: left;
  background: red;
  height: 100vh;
}

.right {
  width: 50%;
  float: right;
  background: green;
  height: 100vh;
}

.one {
  width: 100%;
  background: yellow;
  height: 100vh;
  display: block;
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="left">


  <ul class="pivot-nav">
    <li class="pivot-nav-item"><a class="o-c default-underline custom-scroll-link" href="#one" data-toggle="my-scrollspy-2">1</a></li>


  </ul>

</div>



<div class="one">
  Some more TEXT HERE
</div>

Answer 1

您可以呼叫delay()在动画在fx队列上运行之前添加一个暂停：

$(".o-c").click(function() {
  $('html, body').delay(5000).animate({
    scrollTop: $(".one").offset().top
  }, 2000);
});

$(".o-c").click(function() {
  $('html, body').delay(5000).animate({
    scrollTop: $(".one").offset().top
  }, 2000);
});

$(".o-c").click(function() {
  $('html, body').delay(5000).animate({
    scrollTop: $(".one").offset().top
  }, 2000);
});

.left {
  width: 50%;
  float: left;
  background: red;
  height: 100vh;
}

.right {
  width: 50%;
  float: right;
  background: green;
  height: 100vh;
}

.one {
  width: 100%;
  background: yellow;
  height: 100vh;
  display: block;
  clear: both;
}

另外，您可以使用setTimeout()：

$(".o-c").click(function() {
  setTimeout(function() {
    $('html, body').animate({
      scrollTop: $(".one").offset().top
    }, 2000);
  }, 5000);
});