延迟 jQuery 淡入淡出 5 秒

Question

我怎样才能正确地将这种淡入延迟 5 秒？当我更改数字“（2000）”时，它会将图像从不透明加载到透明。我想简单地将淡入延迟 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 声明中删除延迟）。