javascript .delay() 5 秒后淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25005222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade Out after .delay() of 5 seconds
提问by Francesca
I'm trying to make a section of my site fadeIn after 5 seconds using the following:
我正在尝试使用以下方法在 5 秒后淡入我的网站的一部分：
$('#topScroll').delay(5000).fadeIn(400);
I can't seem to get it to work. Does this need to be hooked to an event? I see that doing the same with fadeOut works just fine with no event.
我似乎无法让它工作。这是否需要与事件挂钩？我看到对fadeOut 做同样的事情也很好，没有事件。
<div id="topScroll">
<a class="scroll">Scroll<br /><img src="images/scroll.png" alt="scroll" /></a>
</div>
I thought perhaps the div needed to be display:nonefirst before it can fade in, but this doesn't seem to make a difference.
我想也许 div 需要display:none在它可以淡入之前首先出现，但这似乎没有什么区别。
回答by Kyle Emmanuel
Try this: $('#topScroll').hide().delay(5000).fadeIn(400);
试试这个： $('#topScroll').hide().delay(5000).fadeIn(400);
Your div is already visible, so you might as well hide it again for fadeIn()to perform.
您的 div 已经可见，因此您不妨再次隐藏它fadeIn()以执行。
fadeOut()works because topscrollis already visible. reference: http://api.jquery.com/fadeout/
fadeOut()有效，因为topscroll已经可见。参考：http: //api.jquery.com/fadeout/
回答by Bairdy
I'm an amateur, but this works for me....
我是业余爱好者，但这对我有用....
function FadeToZero()
{
$(".myBox").children().delay(5000).fadeOut(800);
}
回答by JOSEFtw
"delay is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases." http://api.jquery.com/delay/
“延迟并不能替代 JavaScript 的原生 setTimeout 函数，后者可能更适合某些用例。” http://api.jquery.com/delay/
Try this:
试试这个：
setTimeout(function(){
$("#topScroll").fadeIn(400);
}, 5000)
Together with this CSS:
连同这个CSS：
#topScroll {display: none;}
回答by kazy
Yes, the div must be set display: none.
是的，必须设置 div display: none。
The problem is that you try to run that function on a DOM element that is not yet loaded. Modify your code as the following:
问题是您尝试在尚未加载的 DOM 元素上运行该函数。修改你的代码如下：
<script>
jQuery(function($) {
$('body').panelSnap();
$('#topScroll').delay(5000).fadeIn(400);
});
</script>
And it will work. When you embed code in the jQuery(function($) {})block, all the code inside is executed after DOM is fully loaded.
它会起作用。当你在jQuery(function($) {})块中嵌入代码时，里面的所有代码都是在 DOM 完全加载后执行的。
Just don't forget to set the #topScrollto display: none
只是不要忘记设置#topScroll为display: none
回答by Steven
Make sure your "#topScroll" element is in fact not showing first, then use setTimeout()to delay fading in for 5 seconds:
确保您的“#topScroll”元素实际上没有首先显示，然后使用setTimeout()延迟淡入 5 秒：
$('#topScroll').hide();
setTimeout(function() {
$('#topScroll').fadeIn(400);
}, 5000);
