How to make text blink conditionally using java script

Question

On a web page I have some text that I wish to blink under certain conditions (when counter is even) and not to otherwise

The problem is that once it starts blinking, it blinks all of the time. How can I stop it?

<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">&nbsp</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>

The issue is because jQuery's fadeOut/ fadeIn apply an opacity value to the actual element and will continue to do so after the className is removed. Modern CSS using keyframes (in an answer below too) is both more performant and doesn't have state related problems like this one. — Luke Briggs
– Luke Briggs, Commented Jun 30, 2022 at 17:11

Psionman · Accepted Answer · 2022-06-30 17:09:38Z

4

I have created a class blink which contains CSS for blinking effect.
then I am checking whether counter is odd or even.
if it's even then I am adding blink class and if it's not than I am checking whether it's contains blink class or not. If it does then I am removing blink class otherwise do nothing.

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">&nbsp</div>
<button onclick="updateText()">Click</button>

edited Jun 30, 2022 at 17:09

Psionman

3,8411 gold badge43 silver badges95 bronze badges

answered Jun 30, 2022 at 17:06

Nixit Ahir

2,4253 gold badges14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Unmitigated · Accepted Answer · 2022-06-30 17:06:03Z

You can store the interval id and call clearInterval on each button click, only starting the interval again when the counter is even. Furthermore, to stop all current and queued animations on the element, call $('.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">&nbsp;</div>
<button onclick="updateText()">Click</button>

JeanJacquesGourdin · Accepted Answer · 2022-06-30 17:08:17Z

You can use .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">&nbsp</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>

Collectives™ on Stack Overflow

How to make text blink conditionally using java script

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related