如何在 jQuery 中使元素“闪烁”？

在本文中，我们将使用 jQuery 创建闪烁元素。下面讨论两种方法。

我们将使用 CDN 链接来包含 jQuery 内容。 jQuery 的 CDN 链接必须添加到 HTML 文档中。

https://code.jquery.com/

我们将使用 HTML5 和 CSS3 来创建我们的文档结构并添加所需的元素。

• HTML 代码：我们将在带有黑色边框的 div 元素中添加一些虚拟文本。随后，我们将让这个文本闪烁。

    
  
      
      
      Document
      
      
          
  
    
  
      Geeks for Geeks
      
          
              This is the flashing element
      
  
    

• CSS 代码：让我们使用 CSS 设计元素，使页面具有吸引力。

  CSS代码：

• 输出：
  

方法一：使用fadeIn()和fadeOut()方法：在这种方法中，我们将在元素上设置连续的fadeIn()和fadeOut()方法，然后设置一个间隔，以确保闪烁无限期地持续下去。

$(document).ready(() => {
    setInterval(() => {
        $('p').fadeIn();
        $('p').fadeOut();
    }, 500);
});

例子：

  

    
    
  
    
        How to make an element
        "flash" in jQuery?
    
  
    
    
  
    
        .header {
            margin-left: 18px;
            color: rgb(0, 153, 0);
        }
  
        .element {
            border: 2px solid black;
            width: 12vw;
            padding: 5px;
        }
    

  

    Geeks for Geeks
    
        
            This is the flashing element
        
    
  
    
        $(document).ready(() => {
            const lheight = $('.element').height();
            setInterval(() => {
                $('p').fadeIn();
                $('p').fadeOut();
  
                // The following code keeps the 
                // height of the div intact
                if ($('.element').height() !== 0) {
                    $('.element').css('height', `${lheight}px`);
                }
            }, 500);
        });
    

  

输出：

方法二：使用toggleClass()方法：我们将使用该方法来改变不同设计的CSS类。结果，该元素似乎是闪光的。

让我们添加所需的 CSS 类：

以下 JavaScript 将帮助我们使文本元素闪烁不同的颜色：

$(document).ready(() => {
    setInterval(() => {
        switch ($("p").attr("class")) {
            case "text flash1":
                $("p").toggleClass("flash1 flash2");
                break;
              
            case "text flash2":
                $("p").toggleClass("flash2 flash1");
        }
    }, 500);
});

例子：

  

    
    
  
    
    
  
    
        How to make an element
        "flash" in jQuery?
    
  
    
        .header {
            margin-left: 16px;
            color: rgb(0, 153, 0);
        }
  
        .element {
            border: 2px solid black;
            width: 12vw;
            padding: 5px;
        }
  
        .flash1 {
            color: black;
        }
  
        .flash2 {
            color: rgb(0, 153, 0);
        }
    

  

    Geeks for Geeks
    
        
            This is the flashing element
        
    
  
    
        $(document).ready(() => {
            setInterval(() => {
                switch ($("p").attr("class")) {
                    case "text flash1":
                        $("p").toggleClass("flash1 flash2");
                        break;
                    case "text flash2":
                        $("p").toggleClass("flash2 flash1");
                }
            }, 500);
        });
    

  

输出：