介绍页面打开后开始动画jQuery高级动画答案

【问题标题】：Start animation after intro page is open jQuery advanced animation介绍页面打开后开始动画jQuery高级动画
【发布时间】：2015-06-09 04:24:45
【问题描述】：

我有一个带有 jQuery 动画的介绍页面。它滑动页面的顶部和底部以打开网站。此外，我在网站内部有一个高级动画，它以缩放和旋转 WELCOME 图像开始。我希望 WELCOME 图像在介绍页面完成后开始缩放和旋转，但不是同时进行。我该怎么做？我尝试使用.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 秒内打开网站

【问题讨论】：

api.jquery.com/animate - 请注意，animate 采用 complete 参数，该参数是动画完成后触发的函数。该页面上有一个示例。

标签： jquery animation

【解决方案1】：

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

功能齐全

如果提供，完成回调函数会在动画完成。这对于串接不同的动画按顺序排列在一起。未发送任何回调参数，但这是设置为动画的 DOM 元素。如果多个元素动画，回调执行一次匹配的元素，而不是整个动画一次。

这适用于短链连续动画，但如果您需要等待并发动画完成（听起来像您）或者有很长的动画列表要运行，您可以使用@987654322 @（特别是 .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(...);
});

【讨论】：