加载淡入淡出动画未显示

debugcn 发表于 Dev

编码极客

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Animations</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function({
   
      $("Header").fadeIn(1000);
  
      });
    </script>
    <style>
    @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
    *{
    margin: 0px;
    padding: 0px;
    }
    #Container{
    width: 1368px;
    }
    #Header{
    height: 200px;
    background-color: #00f;
    }
    h1{
      text-align: center;
      line-height: 200px;
      font-size: 55px;
      font-family: 'Fira Sans Condensed', sans-serif;
      color: #fff;
    }
    </style>
    </head>
    <body>
	<div id="Container">
		<div id="Header">
		<h1 id="h1">Welcome to Website</h1>
		</div>
	</div>
    </body>
    </html>

问题是在页面加载时静态显示它，没有按照jQuery代码中的定义褪色。问题可以与HTML的呈现相关联吗？

WebSwami

当您想要淡入淡出时，它的先前状态应该显示为：none; 更新它，它将起作用。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$("#Header").fadeIn(1000);

});
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
*{
margin:0px;
padding:0px;
}
#Container{
width:1368px;
}
#Header{
height:200px;
background-color:blue;
display: none;
}
h1{
text-align:center;
line-height:200px;
font-size:55px;
font-family: 'Fira Sans Condensed', sans-serif;
color:white;
}
</style>
</head>
<body>
<div id="Container">
    <div id="Header">
    <h1 id="h1">Welcome to Website</h1>
    </div>
</div>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。