JQuery 动画激活顺序不正确

Question

我为我的流开发了一个 JQuery 动画。当观众购买奖励时，屏幕上会出现公告。

动画应该这样显示：

半不透明条展开
标题在栏的中央滑动
标题滑出栏
条形变空

尽管延迟看起来一致，一个接一个地显示动画，但 3) 和 4) 步骤同时播放。

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);

感谢您的帮助

Answer 1

d 和 e 的问题是它们的第二个延迟+动画排在第一个延迟+动画之后，它不是单独的延迟+动画。

考虑：

$("#id")
    .delay(100)
    .animate(..., 100, () => log(200))
    .delay(100)
    .animate(..., 100),() => log(400))

最后一个是 400，因为它是 100+100+100+100。

在你的代码中，它是一样的，除了你有：

$("#id")
    .delay(100)
    .animate(..., 100, () => log(200));
// some other code
$("#id")
    .delay(100)
    .animate(..., 100),() => log(200))

最后一个日志应该仍然是 400，而不是 200，因为它与之前的代码相同，只是分成两条“线”。

这是因为每个 .delay 和 .animate 都被添加到 #id 的同一个队列中。

Chaining/not 链接没有影响，动画不会等待 100，因为它链接到 .delay，它等待 100，因为队列中有延迟，即与：

$("#id").delay(100);
$("#id").animate(..., 100, () => log(200));

所以你要么需要调整你的.delay时间来移除之前的延迟+动画，例如.delay(wait - 1000 - duration)，要么使用多个“队列”。

https://api.jquery.com/delay/

.delay( duration [, queueName ] )

所以上面的例子变成了：

$("#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) });

JQuery 动画激活顺序不正确

JQuery animates activating not in right order

javascript

jquery

jquery-animate