启动动画后，介绍页面是打开jQuery高级动画

Question

我有一个jQuery动画的介绍页面。它滑动页面的上下两侧来打开一个网站。此外，我有一个先进的动画内部的网站本身开始缩放和旋转欢迎图像。我希望欢迎图像开始缩放和旋转后介绍页面完成，但不同时。我怎么可能做到呢?我尝试使用.stop(true, true).delay(7000)，但没有成功。我将非常感谢任何反馈和帮助。以下是我到目前为止所做的

<div id="welcome"><img src="images/welcome___.png" width="30%"></div>

#welcome {
position: absolute;
top: 8%;
left: 8%;
}

$(document).ready(function(){
    var logo = $('#welcome');
    var scaleVar = 0;
    var rotateVar = 0;
    $({scaleVar: 0, rotateVar: 0}).animate(
    {
        scaleVar: 3,
        rotateVar: 360
    },
    {
        duration: 6000,
        step: function(now, ab){
            if(ab.prop == 'scaleVar')
                scaleVar = now;
            else if(ab.prop == 'rotateVar')
                rotateVar = now;
            logo.stop(true, true).delay(7000).fadeIn(4000);
            logo.css('transform', 'scale(' + scaleVar + ') rotate(' + rotateVar + 'deg)')
            logo.animate({left: '28%'}, 4000, 'easeOutBounce'); 
            logo.fadeOut(7000);
        }
      }
    )
});

介绍页在3秒内打开网站

Answer 1

要链接动画，可以使用.animate()的complete参数:

功能齐全

如果提供，则在调用后触发完整的回调函数动画完成。这对于不同的字符串很有用动画在一起的顺序。回调没有发送任何参数，但它被设置为正在动画的DOM元素。如果多个元素被动画化，每个元素执行一次回调匹配元素，整个动画一次也不匹配。

对于短链的顺序动画来说，这很好，但是如果你需要等待并发动画完成(听起来像是)或者有一长串动画要运行，你可以使用延迟对象API(特别是.promise()和$.when())来正确地链接你的事件序列。在您的例子中，它允许您等待，直到所有的介绍动画完成，在开始您的标志动画。

function animateIntro() {
  var introElements = $('<selector for all elements animated in intro>');
  // do the intro animation on introElements
  return introElements.promise();
}
function animateWelcomeLogo() {
  $('#logo').animate(...);
}
$.when(animateIntro()).done(animateWelcomeLogo);

或

$.when(
  $('#top').animate(...),
  $('#bottom').animate(...),
).done(function() {
  $('#logo').animate(...);
});