嘿，我有一个问题让我很紧张，但我不明白为什么会这样。我想在页面加载时，我的 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;
}
最佳答案
用以下代码替换您的代码，它将按您的意愿工作。
$(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>关于javascript - jQuery addClass 不适用于页面加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29266990/