I'm attempting to create a blinking effect for an image by continuously fading it in and out. I've implemented two while loops to adjust the opacity attribute of the element - each loop changing the opacity by 10% and pausing for 10ms. Although the first loop runs smoothly, iterating 10 times before moving on, the second loop only adjusts the opacity once and then goes into an infinite loop without affecting the opacity further. Does anyone have insights on what might be causing this issue and how it can be resolved?
async function blink(){
var arrow = document.getElementById('downArrow');
arrow.style.opacity = 1;
while(window.getComputedStyle(arrow).opacity > 0){
arrow.style.opacity -= 0.1;
await sleep(10);
console.log('first loop');
}
while(window.getComputedStyle(arrow).opacity <= 1){
arrow.style.opacity += 0.1;
await sleep(10);
console.log('second loop');
}
blink();
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}