编辑:我最初在脚本中留下了一个额外的右括号，这导致了错误。现在的代码正如我所希望的那样工作。
我有一些文本在加载时显示在页面中央。我想让这个文本淡出(实际上是淡入然后淡出，但我想在我弄清楚如何让它淡出之后让它淡入会很简单。所以，我查了一下我能找到的东西并遇到了我在下面实现的 JQuery fadeOut 函数。尽管出于某种原因，文本仍然没有淡出。我做错了什么，正确的方法是什么？
提前致谢。
<!DOCTYPE HTML>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css</script>
<link rel="stylesheet" type="text/css" href="backgroundstyle.css">
</head>
<body class="background">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<center><h1 class="titletext" id="text" style="color : darkblue; " ><b>Harness the power of the web</b></h1></center>
<script>
$(document).ready(function(){
$("#text").fadeOut();
});
</script>
</body>
</html>
最佳答案
对于您正在使用的 bootstrap v3.3.7，您需要使用 jquery version 1.9.1或高于但低于 version 4 .您还包括 font-awesome css在 script tag而且这也不在 src 中，请改用链接并删除多余的括号 })在 $(document).ready(function(){
一些提示:
而不是使用 <br>很多时候你可以不必要地使用 css 属性。类似中心在 HTML5 中是绝对的，所以最好使用 text-align CSS 属性
也会在一定延迟后淡出您的文本。为此使用 setTimeout 或延迟函数
设置超时
setTimeout(function(){$("#text").fadeOut("slow");}, 2000)
延迟
$("#BodyField").delay(2000).fadeOut();
$(document).ready(function(){
setTimeout(function(){$("#text").fadeOut("slow");}, 2000)
});.titletext {
position: absolute;
top: 100px;
text-align: center;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link src="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"></link>
<body class="background">
<h1 class="titletext" id="text" style="color : darkblue; " ><b>Harness the power of the web</b></h1>
</body>如果您在 onclick 事件上使用淡出功能，则无需使用 setTimeout 只需处理其他更正并使用 "slow"淡出中的参数有一个很好的过渡效果。
$(document).ready(function(){
$('#btn').on('click',function(){
$("#text").fadeOut("slow");
})
});.titletext {
position: absolute;
top: 100px;
text-align: center;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link src="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"></link>
<body class="background">
<button id="btn" >FadeOut</button>
<h1 class="titletext" id="text" style="color : darkblue; " ><b>Harness the power of the web</b></h1>
</body>关于javascript - 使用javascript使文本淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39909783/