gpt4 book ai didi

javascript - jQuery addClass 不适用于页面加载

转载 作者:太空宇宙 更新时间:2023-11-04 12:07:29 25 4
gpt4 key购买 nike

嘿,我有一个问题让我很紧张,但我不明白为什么会这样。我想在页面加载时,我的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com