Estoy tratando de hacer una página donde el texto cambia, y entre cada texto uso un fundido de entrada y salida, y esto funciona perfectamente, sin embargo, cuando cambio la ventana, esta animación se retrasa, pero el .html es el que Utilizo para cambiar el texto, no se demora y termina desincronizando todo.
¿Alguien sabe alguna solución para esto?
Este es mi código JS
$(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) } })Logré solucionar esto y mejoré el código, lo dejo aquí por si alguien lo necesita.
Básicamente, lo configuré para cambiar el texto solo cuando finaliza la animación de desvanecimiento .
Código JS:
$(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) } })