加載動畫漸變未示出

<!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> 
 
\t <div id="Container"> 
 
\t \t <div id="Header"> 
 
\t \t <h1 id="h1">Welcome to Website</h1> 
 
\t \t </div> 
 
\t </div> 
 
    </body> 
 
    </html>

的問題是在靜態顯示它加載頁面時，它不是如在的jQuery代碼中定義的褪色。該問題是否與HTML的渲染有關？

來源

2017-01-28 Coding Geeks

你嘗試通過ID查詢，而不是標籤？ $（'＃Header'） –

你必須用'＃'選擇標題，這意味着選擇一個Id。像'$（「＃header」）。fadeIn（1000）;'。另外，你應該把你的腳本收盤'之前'標籤 –

是有我寫的#header依然代碼不工作 –

當你想淡入某些元素時，它以前的狀態應該是display：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>

來源

2017-01-28 08:35:03 WebSwami

相同的答案我。爲什麼你從其他人複製？ –

謝謝非常正確的答案 –

@CodingGeeks我已經給出答案了。 –

試試這個：

$(document).ready(function({ 

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

})

與此：

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

來源

2017-01-28 08:29:06

仍是問題是有 –

試試這個更新的工作代碼：jsfiddle.net/bharatsing/23eq98qy/1/

需要添加display:none風格DIV採取淡入效果

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

來源

2017-01-28 08:33:35

巴拉特打字錯誤是有我最初鍵入這個問題是存在的 –

要應用淡入效果，你必須要隱藏潛水UDING顯示：無變化

<div id="Header">

到

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

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

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

}); 
</script>

來源

2017-01-28 08:37:09

@Coding怪才試試這個

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

代替

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

來源

2017-01-28 08:50:37 Jeet

加載動畫漸變未示出

回答

相關問題