Question

我有一个带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秒内打开网站

Answer 1

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

完整功能

如果提供，则完成回调函数   动画完成。这对于串联不同可能很有用   动画按顺序组合在一起。回调不会发送任何   参数，但这被设置为动画的DOM元素。如果   多个元素是动画的，回调每执行一次   匹配的元素，不是整个动画的一次。

这适用于短链序列动画，但如果您需要等待并发动画完成（听起来像你这样）或者要运行很长的动画列表，您可以使用{{ 3}}（具体而言，.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(...);
});

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

1 个答案: