Javascript 尽管日志消息正确，JQuery fadeIn（）仍不工作

嘿，伙计们

我最近建立的主页有一个小问题。我试图用“content”类淡入HTML div，它将两条日志消息都放在控制台中，但仍然没有淡入

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

这是我的HTML

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

最后是我的jquery

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

两条日志消息都会立即推送到我的浏览器（Chrome）

---

即使时间设置为10000或更高。

您缺少一个

after

display:none

将其添加回似乎可以解决问题，下面是一个工作示例：

---

缺少

的原因崩溃是因为它正在设置
显示：无背景图像：url（../img/city\u top down\u muzzle.png”）无效。因为它是无效的，所以它使用默认的
display:block（自动可见）。所以你的淡入在某种程度上开始之前就已经完成了
 您缺少一个
after
display:none
将其添加回似乎可以解决问题，下面是一个工作示例：

缺少
的原因崩溃是因为它正在设置
显示：无背景图像：url（../img/city\u top down\u muzzle.png”）无效。因为它是无效的，所以它使用默认的
display:block（自动可见）。所以你的淡入在某种程度上开始之前就已经完成了
 显示：无后缺少分号

此外，图像（背景）可能需要加载一点，因此您可能希望在淡入前预加载图像

请参见下面的运行演示：


$（文档）.ready（函数（）{
//预加载图像
$('
.content{
保证金：0；
位置：固定；
显示：无；
/*背景图像：url（“http://lorempixel.com/1024/1024");
背景颜色：绿色*/
背景尺寸：封面；
宽度：100%；
身高：100%；
}
显示：无后缺少分号；

此外，图像（背景）可能需要加载一点，因此您可能希望在淡入前预加载图像

请参见下面的运行演示：


$（文档）.ready（函数（）{
//预加载图像
$('
.content{
保证金：0；
位置：固定；
显示：无；
/*背景图像：url（“http://lorempixel.com/1024/1024");
背景颜色：绿色*/
背景尺寸：封面；
宽度：100%；
身高：100%；
}
来自jQuery文档

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

我不相信它会使用jQuery文档中的
display:none
，而是使用
opacity:0
来制作动画

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

我不相信它会使用
display:none
，但使用
opacity:0
“它类似于
.fadeTo（）
方法，但该方法不会取消隐藏元素”-该方法是
.fadeTo（）
，而.code>fadeIn（）
方法会“取消隐藏”元素，因此它会更改其
显示
属性…我就是这样解释的它只是缺少分号“它类似于
.fadeTo（）
方法，但该方法不会取消隐藏元素”-该方法是
.fadeTo（）
，而.code>fadeIn（）
方法“取消隐藏”元素，因此它将更改其
显示
属性…这就是我解释它的方式它只是缺少分号哦耶没有看到它哦耶没有看到它
$(document).ready(function(){
  console.log("fading in");
  $('.content').fadeIn("slow", function(){
    console.log("fading done");
  });
});