jQuery addClass在頁面加載時不起作用
[英]jQuery addClass not working on pageload
問題描述
嘿，我遇到了一個困擾我的問題，我不明白為什么會這樣。 我想在頁面加載時，我的h1-tag獲取類.load，以便它以良好的效果淡入，問題是addClass不起作用，我的h1-tag從不加載類。 請幫忙..？
腳本標記中的HTML和jQuery：
<!DOCTYPE html>
<html>
<head>
<title>New Era of Swegre</title>
<meta charset="UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/home.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.wrapper h1').addClass('load');
});
</script>
</head>
<body>
<div class="wrapper">
<h1>SWEGRE DESIGNS</h1>
</div>
</body>
</html>
CSS：
body
{background-color:black}
.wrapper
{
position: relative;
}
h1 {
opacity: 0;
color:white;
font-size: 21px;
text-align: center;
transition: opacity 1s ease-in;
}
.load {
color:white;
opacity: 1;
}
1 個解決方案
解決方案1
1 已采納 2015-03-25 21:41:09
用以下代碼替換您的代碼，它將按您期望的方式工作。
$(document).ready(function () { $('.wrapper h1').addClass('load'); });
.wrapper { position: relative; } h1 { opacity:0; color:black; font-size: 21px; text-align: center; transition: opacity 1s ease-in; } .load { opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrapper"> <h1>SWEGRE DESIGNS</h1> </div>
addclass不起作用的jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.