Javascript FadeIn 无法正常工作

我的代码需要一些帮助，这是我的 HTML 的样子:

<body onLoad="loader();">
<div class="loader"><img src="images/loader.gif></div> 
<div class="main"></div>

CSS:

.main {
   display:none;
}

因此，显示正在加载的 Gif，然后当页面完全加载时，它应该这样做:

function loader() {
 setTimeout(function () {
    $("#main").fadeIn("fast");
    $("#loader").fadeOut("fast");
}, 1000);

};

但它所做的只是加载器 div 消失，然后主 div 出现一瞬间，然后就消失了。在此先感谢您的帮助。 #:)

最佳答案

我认为你的意思是加载程序在 main 淡入后淡出，在这种情况下你需要利用回调参数。

您还可以使用 delay()而不是设置超时。

您还应该使用 $(document).ready() 而不是调用 onload="" 处理程序中的函数。

$(function(){
  $('.main').delay(1000).fadeIn('fast', function(){
    $('.loader').fadeOut('fast');
  });
});

由 Blauharley 记录: 您正在定位具有 ID main(和加载程序)的元素，而您标记中的元素使用 classes。

关于Javascript FadeIn 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32253488/