Question

嘿伙计们！

我最近建成的主页上有一点问题。我尝试用类＆＃34;内容＆＃34;淡出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");
  });
});

两条日志消息都会立即推送到我的浏览器（Chrome）即使时间设置为10000或更高。

Answer 1

;在display: none添加后，您似乎错过了;似乎已修复它，这是一个有效的示例：https://jsfiddle.net/nbekm981/1

丢失display: none background-image: url("../img/city_topdown_blurred.png");的原因是因为它设置的display: block;无效。因为它无效，所以它使用默认的request.Content = new StringContent(doc.ToString(), Encoding.UTF8, "application/atom+xml");（自动可见）。所以你的淡出在它开始之前就已经完成了。

Answer 2

您在display:none;

之后缺少分号

此外，图像（用于背景）可能需要加载一些，因此您可能需要在淡入图像之前预先加载图像。

请参阅正在运行的演示：

$(document).ready(function() {
  // pre-load the image
  $('<img/>').attr('src', 'http://lorempixel.com/1024/1024').load(function() {
    console.log("image done loading");
    // prevent memory leaks
    $(this).remove();

    // assign image to .content 
    $('.content').css('background-image', 'url(http://lorempixel.com/1024/1024)');

    console.log("fading in starts");
    // fade in 
    $('.content').fadeIn(2000, function() {
      console.log("fading done");
    });
  });
});

.content {
  margin: 0;
  position: fixed;
  display: none;
  /*background-image: url("http://lorempixel.com/1024/1024");
    background-color: green;*/
  background-size: cover;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
</div>

Answer 3

来自jQuery文档

.fadeIn（）方法可以设置匹配元素的不透明度。它与.fadeTo（）方法类似，但该方法不会取消隐藏元素并可以指定最终的不透明度级别。

我认为它不会使用display: none进行动画制作，而是opacity: 0。

尽管正确的日志消息，JQuery fadeIn（）仍无法正常工作

3 个答案: