Desarrollo una animación JQuery para mis transmisiones. Cuando un espectador compra una recompensa, aparece un anuncio en la pantalla.
La animación debería mostrarse así:
No obstante, el hecho de que los retrasos parezcan consistentes para mostrar la animación uno tras otro, los pasos 3) y 4) se reproducen al mismo tiempo.
const transition_duration = 1250; let wait = 1000; $('#announcement').delay(wait).animate({height: $('#announcement')[0].scrollHeight, padding: '10px 0 10px 0'}, transition_duration); wait += 1000 + transition_duration; $('#title-container').delay(wait).animate({left: `${($(window).width() - $('#title-container')[0].scrollWidth) / 2.}px`}, transition_duration); $('#subtitle-container').delay(wait).animate({left: `${($(window).width() - $('#subtitle-container')[0].scrollWidth) / 2.}px`}, transition_duration); wait += 4000 + transition_duration; $('#title-container').delay(wait).animate({left: `-${$('#title-container')[0].scrollWidth}px`}, transition_duration); $('#subtitle-container').delay(wait).animate({left: `100%`}, transition_duration); wait += 1000 + transition_duration; $('#announcement').delay(wait).animate({height: 0, padding: 0}, transition_duration);Gracias por tu ayuda
Su problema con d y e es que el segundo retraso + animación se pone en cola después del primer retraso + animación, no es un retraso + animación separado.
Considerar:
$("#id") .delay(100) .animate(..., 100, () => log(200)) .delay(100) .animate(..., 100),() => log(400))el último sería 400 ya que es 100+100+100+100.
En su código, es lo mismo, excepto que tiene:
$("#id") .delay(100) .animate(..., 100, () => log(200)); // some other code $("#id") .delay(100) .animate(..., 100),() => log(200))el último registro aún debe ser 400, no 200, ya que es el mismo código que antes, solo dividido en dos "líneas".
Esto se debe a que cada .delay y .animate se agregan a la misma cola para el #id.
Encadenar/no encadenar no tiene impacto, el animado no espera 100 porque está encadenado a .delay, espera 100 porque hay un retraso en la cola, es decir, lo mismo que:
$("#id").delay(100); $("#id").animate(..., 100, () => log(200)); Por lo tanto, debe ajustar su tiempo de .delay para eliminar el retraso anterior + animar, por ejemplo, .delay(wait - 1000 - duration) , o usar varias "colas".
.delay( duration [, queueName ] )
Así que la muestra anterior se convierte en:
$("#id") .delay(100, "q1") .animate({ animation }, { duration: 100, queue: "q1", complete: () => log(200) }); $("#id") .delay(300, "q2") .animate({ animation }, { duration: 100, queue: "q2", complete: () => log(400) });