Question

简单地说，我使用淡入功能作为我网站的标题文字。然而，我面临的问题是，刷新页面后，文本会消失，并且标题会缩小到顶部的一个小条子。继承我的代码：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

$(document).ready(function() { 
    $("#fade").fadeIn(2000);
});
</script>

<link rel="stylesheet" href="http://bdpastudents.com/~t4645202/dream/dream.css">

<div id="head">
<div id="fade">

<b><h1>Welcome to Dream!</h1></b>
</div>


</div>
</html>

这是我的css：

#fade { 
display: none; 
}

#head {
background: -moz-radial-gradient(green, white);
text-align: center;
color: white;
padding: 5px;
margin: 0px;
}

body {
margin: 0px; 
}

不太确定什么是特别错误，因为当你第一次看到它工作的网站时，但每次之后它都没有。

感谢。

Answer 1

你遗漏了一些标签吗？

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

$(document).ready(function() { 
    $("#fade").fadeIn(2000);
});
</script>

<link rel="stylesheet" href="http://bdpastudents.com/~t4645202/dream/dream.css">
</head>
<body>
<div id="head">
<div id="fade">

<b><h1>Welcome to Dream!</h1></b>
</div>


</div>
</body>
</html>

Answer 2

很难从上面的代码片段中分辨出问题是什么，但我建议使用一种不同的方法来淡入更易于访问的标头，并保留最终占用的空间，防止重新布局。

演示：http://jsbin.com/vaqome/edit?html,css,js,output

这是基于这些风格：

$fade-speed: 2s;

.fade-out {
  opacity: 0;
  transition: visibility 0s linear $fade-speed, opacity $fade-speed;
  visibility: hidden;

}

.fade-in {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 0s, opacity $fade-speed;
}

来源：https://medium.com/medium-eng/five-goofy-things-medium-did-that-break-accessibility-3bc804ae818d#940c

Answer 3

Check this

它按预期工作，你的问题不是头，它是你的背景属性，在测试中我改变了它的纯色并且工作正常。

检查此规则..它不是交叉浏览

background: -moz-radial-gradient(green, white);

Answer 4

凯西发现了这个问题。样式表设置在jquery下面，所以我只是将它移回到顶部。谢谢！

我的标题一直在消失

4 个答案: