En una página web tengo un texto que deseo parpadear bajo ciertas condiciones (cuando el contador es par) y no hacerlo de otra manera
El problema es que una vez que comienza a parpadear, parpadea todo el tiempo. ¿Cómo puedo detenerlo?
<head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script> <title>Test blink</title> </head> <div id="wait-text"> </div> <button onclick="updateText()">Click</button> <script> var counter = 0; var wait_text = document.getElementById('wait-text'); function updateText() { counter ++; wait_text.innerHTML = `wait ${counter}`; wait_text.className = ''; if (counter % 2 == 0) { wait_text.innerHTML = `blink ${counter}`; wait_text.className = 'blinking'; } } function blinker() { let fadeout = 1500; let fadein = 750; $('.blinking').fadeOut(fadeout); $('.blinking').fadeIn(fadein); } setInterval(blinker, 500); </script>blink de clase que contiene CSS para el efecto de parpadeo.counter es par o impar.blink y si no lo es, estoy comprobando si contiene una clase de blink o no. Si es así, estoy eliminando la clase de blink ; de lo contrario, no hago nada. const text = document.querySelector("#wait-text"); let counter = 0; const updateText = () => { counter++; text.innerHTML = counter; if (counter % 2 == 0) { text.classList.add("blink"); } else { if (text.classList.contains("blink")) { text.classList.remove("blink"); } } } .blink { animation: blinkIt 1s infinite; } @keyframes blinkIt { from { opacity: 0; } to { opacity: 1; } } <div id="wait-text"> </div> <button onclick="updateText()">Click</button>Puede almacenar la identificación del intervalo y llamar a clearInterval en cada clic de botón, solo comenzando el intervalo nuevamente cuando el contador es par. Además, para detener todas las animaciones actuales y en cola en el elemento, llame a $('.blinking').stop(true, true) .
var counter = 0; var wait_text = document.getElementById('wait-text'); let intvlId; function updateText() { counter++; clearInterval(intvlId); $('.blinking').stop(true, true).show(); wait_text.innerHTML = `wait ${counter}`; wait_text.className = ''; if (counter % 2 == 0) { wait_text.innerHTML = `blink ${counter}`; wait_text.className = 'blinking'; intvlId = setInterval(blinker, 500); } } function blinker() { let fadeout = 1500; let fadein = 750; $('.blinking').fadeOut(fadeout); $('.blinking').fadeIn(fadein); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wait-text"> </div> <button onclick="updateText()">Click</button>Puedes usar .classList.toggle()
<head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script> <title>Test blink</title> </head> <div id="wait-text"> </div> <button onclick="updateText()">Click</button> <script> var counter = 0; var wait_text = document.getElementById('wait-text'); function updateText() { counter ++; wait_text.innerHTML = `wait ${counter}`; wait_text.className = ''; if (counter % 2 == 0) { wait_text.innerHTML = `blink ${counter}`; wait_text.classList.toggle("blinking"); //chang here } } function blinker() { let fadeout = 1500; let fadein = 750; $('.blinking').fadeOut(fadeout); $('.blinking').fadeIn(fadein); } setInterval(blinker, 500); </script>