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

📅  最后修改于: 2021-11-24 04:59:38             🧑  作者: Mango

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

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

我们将使用 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?
    
  
    
  
    

  

    

Geeks for Geeks

    
        

            This is the flashing element         

    
          

输出:

方法二:使用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?
    
  
    

  

    

Geeks for Geeks

    
        

            This is the flashing element         

    
          

输出: