时间戳

首页 > 解决方案 > 点击时jQuery更新时间间隔

jquery - 点击时jQuery更新时间间隔

问题描述

我在#animation-section中有一个动画，它将在 15 秒后淡出。像下面的工作代码：

var time = 15000;

$('#animation-section').delay(time).fadeOut(600);

因为在这个快速的互联网时代，15 秒是很长的时间。此外，应该有一种方法可以通过按下按钮 (#skip) 来跳过此动画。

$( "#skip" ).click( function () {      
        time = 500;
        $('#animation-section').delay(time).fadeOut(600); 
} );

当这个#skip按钮被按下时，动画应该停止并且#animation-section应该立即fadeOut，我确实尝试通过将时间变量从15秒更新到0.5秒来实现这一点，但似乎时间已经设置好了到 15 秒。

如何使此单击功能更新或覆盖#animation-section 时间延迟？

标签： jquery

解决方案

我认为 jQuery 的 .delay() 函数在这里不是最好的做法，因为你不能打破/停止 jQuery 延迟。

来源：

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的本机 setTimeout 函数，这可能更适合某些用例。

使用setTimeout()函数就可以了。

尝试这个：

var time = 15000;
setTimeout(() => { //this sets a 'delay' of 15000ms(time)
    $("#animation-section").fadeOut(600);   
}, time);

$("#skip").click(function() {
    $("#animation-section").fadeOut(600); //directly fades out the #animation-section without any delay
});

例子：

var time = 15000;
setTimeout(() => { //this sets a 'delay' of 15000ms(time)
  $("#animation-section").fadeOut(600);
}, time);

$("#skip").click(function() {
  $("#animation-section").fadeOut(600); 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animation-section" style="background: blue; width: 100px; height: 100px;">
</div>
<a href="javascript:void(0)" id="skip">Skip animation</a>

推荐阅读