Question

＆＃13;

    <!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>

＆＃13;

问题在于在页面加载时静态显示它，它不会像 jQuery 代码中定义的那样淡化。该问题可以与 HTML 的呈现相关联吗？

Answer 1

当你想淡入一些元素时，它的先前状态应该是display：none; 更新它，它将起作用。

＆＃13;

<!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>

＆＃13;

Answer 2

试试这个：

$(document).ready(function({

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

})

用这个：

$(document).ready(function(){
    $("#Header").fadeIn(1000);
})

Answer 3

尝试此更新的工作代码：jsfiddle.net/bharatsing/23eq98qy/1/

要获取淡入效果，需要在div中添加display:none样式

$(document).ready(function(){
  $("#Header").fadeIn(1000);
});

Answer 4

要应用淡入淡出效果，您必须隐藏潜水显示：无变化

<div id="Header">

到

<div id="Header" style="display: none;">

<script>
$(document).ready(function({

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

});
</script>

Answer 5

@Coding Geeks试试这个

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

而不是

<script> 
   $(document).ready(function({ $("Header").fadeIn(1000); });
</script>

加载未显示的淡入淡出动画

5 个答案: