如何使用jQuery创建一个闪烁的文本效果

在这篇文章中，我们将使用jQuery创建一个闪烁的文本。基本上，一个文本是可见的，然后它就不可见了，然后它又回到它原来的可见性，这个过程反复进行，那么它就被称为闪烁文本。

使用jQuery，创建闪烁的文本是非常简单的。在jquery中有一些内置的方法，我们将使用它们来创建闪烁的文本。我们有一个jQuery方法fadeOut()将一个可见的元素转换成一个隐藏的元素，另一个方法fadeIn()将一个隐藏的元素转换成可见。

淡入效果：我们必须使用CSS在每个元素上标记display: none，以显示fadeIn()方法的工作。

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- Using jquery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>  
    
    <style>
        p {
            color: red;
            font-size: 40px;
            display: none;
        }
    </style>
</head>
  
<body>
    <p id="a">Hello</p>
    <p id="b">Hello</p>
    <p id="c">Hello</p>
  
    <script>
  
        // Fast fade in
         $("#a").fadeIn("fast") // Slow fade in$ ("#b").fadeIn("slow")
  
        // Fade in in 4s
        $("#c").fadeIn(4000)
    </script>
</body>
  
</html>

输出:

如何使用jQuery创建一个闪烁的文本效果？

###

淡出：下面的例子演示了jQuery fadeOut()方法。

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- Using jquery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>  
  
    <style>
        p {
            color:blue;
            font-size: 40px;
        }
    </style> 
</head>
  
<body>
    <p id="a">Hello</p>
    <p id="b">Hello</p>
    <p id="c">Hello</p>
  
    <script>
  
        // Fade out in 4s
         $("#a").fadeOut(1500) // Slow fade out$ ("#b").fadeOut("slow")
  
        // Fast fade out
        $("#c").fadeOut("fast")
    </script>
</body>
  
</html>

输出:

如何使用jQuery创建一个闪烁的文本效果？

最终代码：当上述两种方法一起使用时，结果将是一个闪烁的文本。但上述代码的问题是，文本只会闪烁一次。所以要反复做这个过程，我们可以使用jQuery的setInterval()函数。

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- Using jquery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
  
    <style>
        p {
            color: blue;
            font-size: 40px;
        }
    </style>
</head>
  
<body>
    <p id="a">Hello</p>
  
    <script>
        setInterval(function () {
             $("#a").fadeOut(200)$ ("#a").fadeIn(200)
        },100)
    </script>
</body>
  
</html>

输出:

如何使用jQuery创建一个闪烁的文本效果？