javascript - 警报框首先运行？

Question

下面我有一些 jQuery/JS。首先要运行的是最后的警报框。

$(document).ready(function() {
    $("#id1 img , .msg").stop().animate(
        { width: '300px', height: '300px'}, 
        { duration: 'slow', easing: 'easeInSine' }).pause(3000);

    $(".msg").animate(
        { width: '50px', height: '50px' }, 
        { duration: 498, easing: 'easeOutSine' });
    $("#id1 img").animate(
        { width: '50px', height: '50px' }, 
        { duration: 500, easing: 'easeOutSine' });

    $("#id1 img , .msg").animate(
        { width: '300px',height: '300px'}, 
        { duration: 'slow', easing: 'easeInSine' }).pause(3000);

    alert('eh?');
});

我确实有一个 easing插件。

如果我运行此命令，警报将显示，然后第一个动画将在后台发生但不会显示。它只会以最终尺寸显示。

警报不应该在所有动画结束时运行吗？

谁能解释一下为什么会发生这种情况？

Answer 1

正如其他评论者所提到的，动画方法是非阻塞的，因此这是正确的行为。如果您希望在动画结束时调用警报，请查看 animate 方法的回调参数。文档指出:“动画完成时要执行的函数，针对每个动画元素执行一次。”

http://docs.jquery.com/Effects/animate