尽管正确的日志消息,JQuery fadeIn()仍无法正常工作

Question

大家好!

我在最近建立的主页上遇到了一些问题.我尝试使用"内容"类淡入HTML div,并将两条日志消息都放入控制台,但它仍然没有消失!

当然,我删除了这些代码段中的所有不需要的信息

这是我的HTML

<div class="content">  </div>

还有我的CSS

.content{
margin: 0px;
position: fixed;
display:none
background-image: url("../img/city_topdown_blurred.png");
background-size:cover;
width: 100%;
height: 100%;
}

最后是我的jquery

$(document).ready(function(){
  console.log("fading in");
  $('.content').fadeIn("slow", function(){
    console.log("fading done");
  });
});

即使时间设置为10000或更高,这两条日志消息也会立即推送到我的浏览器(Chrome).

Answer 1

你是缺少一个;后display: none加入,早在似乎解决了,这里是一个工作示例:https://jsfiddle.net/nbekm981/1

失踪的原因;是因为设置display: none background-image: url("../img/city_topdown_blurred.png");无效.因为它无效,所以它使用默认值display: block;(自动可见).所以你的淡出在它开始之前就已经完成了.