Question

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

我有一些文本在加载时会显示在页面的中央。我希望这个文字淡出（实际上是淡入淡出然后出来，但是我想在让它淡出后我想它会变得很简单。所以，我抬起头来看看我是什么我可以找到并发现我在下面实现的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>

Answer 1

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

你的错误是 - jQuery代码});

中的额外括号

＆＃13;

  $(document).ready(function(){
      $("#text").fadeOut();
  });

＆＃13;

<!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>

＆＃13;

来自官方网站fadeOut()

的有用article

Answer 2

使用正在使用的bootstrap v3.3.7时，您需要使用jquery version 1.9.1或更高但低于version 4。此外，您在font-awesome css中包含script tag，而在src中也不包括，请使用链接，同时删除})中的额外括号$(document).ready(function(){

SomeTips：

不必多次使用<br>，您可以使用css属性。类似的中心在HTML5中是绝对的，所以你最好使用text-align css属性

在一段延迟后也淡出你的文字。为此使用setTimeout或延迟函数

<强>的setTimeout

setTimeout(function(){$("#text").fadeOut("slow");}, 2000)

<强>延迟

$("#BodyField").delay(2000).fadeOut();

＆＃13;

$(document).ready(function(){
   setTimeout(function(){$("#text").fadeOut("slow");}, 2000) 
     
  });

＆＃13;

.titletext {

  position: absolute;
  top: 100px;
  text-align: center;
}

＆＃13;

<!-- 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>

＆＃13;

如果你在onclick事件上有你的fadeout函数，那么就不需要使用setTimeout来处理其他修正，并在fadeout中使用"slow"参数来获得良好的过渡效果。

＆＃13;

$(document).ready(function(){
  $('#btn').on('click',function(){
    $("#text").fadeOut("slow");
  })
   
     
  });

＆＃13;

.titletext {

  position: absolute;
  top: 100px;
  text-align: center;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 3

尝试使用这样的，

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

使用javascript淡出文本

3 个答案: