使用javascript使文本淡出

Making text fade out with javascript

本文关键字：淡出 文本 javascript 使用      更新时间：2023-09-26

编辑:我最初在脚本中留下了一个额外的右括号，这导致了错误。代码现在就像我所希望的那样工作。

我有一些文本在加载时显示在页面的中心。我想让这个文本淡出(实际上淡出，然后淡出，但我想让它淡出将是简单的，我弄清楚如何使它淡出。因此，我查找了我能找到的东西，并找到了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(){

中的额外括号})

SomeTips:

你可以使用css属性来代替使用<br>。类似的中心在HTML5中是绝对的，所以你最好利用text-align css属性

还可以在一定延迟后淡出文本。使用setTimeout或delay函数

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>

为了清晰起见，我删除了所有不必要的代码，现在它可以工作了。

你的错误是- jQuery代码});中额外的括号

  $(document).ready(function(){
      $("#text").fadeOut();
  });
<!DOCTYPE HTML>
  <html>
  <head>
    <!-- jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>
  <body class="background">
    <center>
      <h1 class="titletext" id="text" style="color : darkblue; " ><b>Harness the power of the web</b></h1></center>
  </body>
  </html>

官方网站关于fadeOut()的有用文章

试着这样写，

$(document).ready(function(){
  $("#text").fadeOut("slow"); // Or you can mention the duration.
});
相关文章：