在.delay()延迟5秒后淡出

Question

我想让网站的某个部分在5秒后淡入，使用以下代码：

$('#topScroll').delay(5000).fadeIn(400);

我似乎无法让它正常工作。这需要连接到事件吗？我发现使用fadeOut做同样的事情没有事件也可以很好地工作。

<div id="topScroll">
    <a class="scroll">Scroll<br /><img src="images/scroll.png" alt="scroll" /></a>
</div>

我认为在淡入之前，div 可能需要先使用 display:none ，但是这似乎并没有什么区别。

- Francesca

---

请避免链接到外部网站，而是在 JSfiddle 上以最小化的方式复制您的问题。随时间推移，外部链接将会发生变化并且对未来用户失去相关性。 - Terry

Answer 1

尝试这样做：$('#topScroll').hide().delay(5000).fadeIn(400); 你的div已经可见，所以最好再隐藏一次，为fadeIn()的执行做准备。 fadeOut()有效是因为topscroll已经可见。参考：http://api.jquery.com/fadeout/

- Kyle Emmanuel

Answer 2

我虽然是业余爱好者，但这对我来说非常有效...

function FadeToZero()
{
    $(".myBox").children().delay(5000).fadeOut(800);    
}

- Bairdy

Answer 3

“delay”并不能取代JavaScript的原生setTimeout函数，对于某些用例来说，setTimeout可能更加适合。

http://api.jquery.com/delay/

请尝试以下操作：

setTimeout(function(){
    $("#topScroll").fadeIn(400);
}, 5000)

这是需要用到的CSS样式：

#topScroll {display: none;}

JSFIDDLE

- JOSEFtw

Answer 4

确保你的“#topScroll”元素实际上不是首先显示的，然后使用setTimeout()来延迟5秒淡入：

$('#topScroll').hide();
setTimeout(function() {
    $('#topScroll').fadeIn(400);
}, 5000);

- Steven

Answer 5

是的，div 必须设置为 display: none。

问题在于你尝试在尚未加载的 DOM 元素上运行该函数。将代码修改为以下内容：

<script>
jQuery(function($) {
    $('body').panelSnap();
    $('#topScroll').delay(5000).fadeIn(400);
});
</script>

这样就可以了。当您将代码嵌入到jQuery(function($) {})块中时，所有内部代码都会在DOM完全加载后执行。

只需不要忘记将#topScroll设置为display: none

- kazy