点击时jQuery更新时间间隔

Question

我在 #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 应该立即淡出，我确实尝试通过将时间变量从 15 秒更新为 0.5 秒来实现这一点，但似乎时间已经设置为 15 秒。

如何让这个点击函数更新或覆盖#animation-section 时间延迟？

Answer 1

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

Source:

.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>