I'm trying to make a page where the text changes, and between each text I use a fade in and fade out, and this works perfectly, however when I change the window this animation is delayed, but the .html that is the that I use to change the text doesn't delay, and ends up getting everything out of sync.
Does anyone know any solution for this?
This is my JS code
$(document).ready(() => {
let ms = 8000
let textQueue = ['1', '2', '3']
for (let index = 0; index < textQueue.length; index++) {
((index) => {
setTimeout(() => {
if (index == textQueue.length - 1) {
$(".text").click(() => {
window.open('link')
})
}
$(".text")
.html(textQueue[index])
.fadeIn(1500)
.delay(5000)
.fadeOut(1500)
}, ms * index)
})(index)
}
})
I managed to solve this and improved the code, I'll leave it here in case anyone needs it.
Basically I set it to change the text only when the fadeOut animation ends.
JS code:
$(document).ready(() => {
let ms = 8000
let textQueue = [
'0',
'1',
'2'
]
let index = 0
$(document).click(() => {
if (index + 1 === textQueue.length) {
window.open('link')
return
}
index++
$(".text").html(textQueue[index])
})
animation()
function animation() {
if (index < textQueue.length) {
$(".text").fadeOut(1500, () => {
$(".text").html(textQueue[index])
})
}
$(".text")
.fadeIn(1500)
.delay(5000)
setTimeout(() => {
if (index < textQueue.length - 1) {
index++
animation()
}
}, 8000)
}
})