¿Cómo hacer que un elemento «flash» en jQuery?

En este artículo, crearemos elementos intermitentes usando jQuery. Hay dos enfoques que se analizan a continuación.

Usaremos el enlace CDN para incluir contenido jQuery. El enlace CDN de jQuery debe agregarse al documento HTML.

https://code.jquery.com/

Usaremos HTML5 y CSS3 para crear la estructura de nuestro documento y agregar los elementos necesarios.

Código HTML: agregaremos un texto ficticio dentro de un elemento div con un borde negro. Posteriormente, haremos que este texto parpadee.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
           initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
        integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
        crossorigin="anonymous">
        </script>
</head>
  
<body>
    <h2 class="header">Geeks for Geeks</h2>
    <div class="element">
        <p class="text flash1">
            This is the flashing element</p>
    </div>
</body>
  
</html>

Código CSS: diseñemos los elementos usando CSS para que la página sea atractiva.

Código CSS:

<style>
    .header {
        margin-left: 18px;
        color: rgb(0, 153, 0);
    }
  
    .element {
        border: 2px solid black;
        width: 12vw;
        padding: 5px;
    }
</style>

Producción:

Enfoque 1: Usar el método fadeIn() y fadeOut(): En este enfoque, estableceremos los métodos fadeIn() y fadeOut() consecutivos en el elemento y luego estableceremos un intervalo para garantizar que el parpadeo continúe indefinidamente.

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

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
      initial-scale=1.0">
  
    <title>
        How to make an element
        "flash" in jQuery?
    </title>
  
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
        integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>
  
    <style>
        .header {
            margin-left: 18px;
            color: rgb(0, 153, 0);
        }
  
        .element {
            border: 2px solid black;
            width: 12vw;
            padding: 5px;
        }
    </style>
</head>
  
<body>
    <h2 class="header">Geeks for Geeks</h2>
    <div class="element">
        <p class="text flash1">
            This is the flashing element
        </p>
    </div>
  
    <script>
        $(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);
        });
    </script>
</body>
  
</html>

Producción:

Enfoque 2: Usar el método toggleClass(): Usaremos el método para cambiar las clases de CSS con diferentes diseños. Como resultado, el elemento parecerá ser flash.

Agreguemos las clases CSS requeridas:

<style>
    .header {
        color: rgb(0, 153, 0);
    }
  
    .element {
        border: 2px solid black;
        width: 12vw;
        padding: 5px;
    }
  
    .flash1 {
        color: black;
    }
  
    .flash2 {
        color: rgb(0, 153, 0);
    }
</style>

El siguiente JavaScript nos ayudará a hacer que el elemento de texto parpadee con un color diferente:

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

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0">
  
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
        integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>
  
    <title>
        How to make an element
        "flash" in jQuery?
    </title>
  
    <style>
        .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);
        }
    </style>
</head>
  
<body>
    <h2 class="header">Geeks for Geeks</h2>
    <div class="element">
        <p class="text flash1">
            This is the flashing element
        </p>
    </div>
  
    <script>
        $(document).ready(() => {
            setInterval(() => {
                switch ($("p").attr("class")) {
                    case "text flash1":
                        $("p").toggleClass("flash1 flash2");
                        break;
                    case "text flash2":
                        $("p").toggleClass("flash2 flash1");
                }
            }, 500);
        });
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por tirtharajsengupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta