延迟jQuery淡入5秒

Question

如何才能将此淡入效果延迟5秒？当我更改号码时（＆＃39;（2000）＆＃39;它将图像从不透明加载到透明。我想简单地将淡入淡出延迟5秒钟。

$(document).ready(function() {
    $('#page_effect').fadeIn(2000);
});

<div id="page_effect" style="display:none;">

更新

<!--1.0 Fader-->
<script type="text/javascript">
$(document).ready(function(){

$('#page_effect').delay( 5000 ).fadeIn(2000);

});
</script>

Answer 1

您可以通过几种不同的方式来实现所需的解决方案。我将立即发布两篇文章。

首先是jQuery自己的.delay()：

$('#page_effect').delay(5000).fadeIn(2000);

第二个显然是setTimeout：

var effectTimer = setTimeout(function() {
    $('#page_effect').fadeIn(2000);
}, 5000);

存储计时器可让您在必要/需要时取消它。

第三个 - 在我看来，首选的解决方案是通过CSS：

#page_effect {
    opacity: 0;
    transition: opacity 2s ease-in-out 5s;
}
#page_effect.active {
    opacity: 1;
}

您只需在domReady中添加该类。而不是定义转换中的延迟，您可以再次使用setTimeout（但不要忘记从CSS声明中删除延迟）。