I'm currently experimenting with creating a scrolling cursor effect on a string of text. The goal is to make it look like the text has been highlighted with a blinking cursor, similar to what you see in your browser's search bar.
window.setInterval(function(){
if($('.cursorBlink').hasClass('blink')){
$('.cursorBlink').addClass('blinkOff');
}
if($('.cursorBlink').hasClass('blinkOff')){
$('.cursorBlink').removeClass('blinkOff').addClass('blink');
}
}, 1000);
The code snippet above sets up an interval to add and remove CSS classes every second, but for some reason, it doesn't work as intended. Interestingly, if I include an alert() function within the intervals, it somehow corrects the issue, which is quite puzzling.
You can view the interactive example on my jsfiddle page. I've added the alert() function there to demonstrate how it affects the outcome (set to run every 3 seconds to avoid annoyance).