在.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，但这似乎没有什么区别。

Answer 1

试试这个：$('#topScroll').hide().delay(5000).fadeIn(400);

您的div已经可见，因此您可以再次隐藏它以使fadeIn()能够执行。

fadeOut()有效，因为topscroll已经可见。参考：http://api.jquery.com/fadeout/

Answer 2

“延迟不是JavaScript的原生setTimeout函数的替代品，这可能更适合某些用例。” http://api.jquery.com/delay/

试试这个：

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

与此CSS一起使用：

#topScroll {display: none;}

JSFIDDLE

Answer 3

我是业余爱好者，但这对我有用....

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

Answer 4

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

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

Answer 5

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

问题是您尝试在尚未加载的DOM元素上运行该函数。修改您的代码如下：

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

它会起作用。当您在jQuery(function($) {})块中嵌入代码时，内部的所有代码都在DOM完全加载后执行。

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