I have a situation where an tag's content is being dynamically changed with jQuery and then faded in and out using the Velocity JS library along with the setInterval function. Initially, everything works smoothly for about 30 seconds. However, after that, there seems to be a malfunction where jQuery starts altering the contents of the tag before it has completely faded out.
Below is the JavaScript code:
let counter = 0;
function chooseWord() {
let words = ["foo", "bar", "foo"];
if (counter !== 2) {
counter += 1;
} else {
counter = 0;
}
return words[counter];
}
function refreshText() {
$("#div").text("Foo " + chooseWord())
.velocity("fadeIn", {
duration: 2500
})
.velocity("fadeOut", {
delay: 1500,
duration: 2500
});
}
$(document).ready(function() {
refreshText();
setInterval(function() {
refreshText();
}, 7000);
});
Here is the corresponding tag being used:
<h1 class="foobar" id="div"></h1>
I've attempted to use jQuery's timer as well but encountered the same issue. Can anyone pinpoint what might be causing this problem or suggest an alternative approach to achieving the desired outcome?