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"> </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 which contains CSS for blinking effect.counter is odd or even.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"> </div>
<button onclick="updateText()">Click</button>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"> </div>
<button onclick="updateText()">Click</button>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"> </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>