Запустить анимацию после открытия открытой страницы jQuery advanced animation

Question

У меня есть интро-страница с анимацией jQuery. Он открывает верхнюю и нижнюю стороны страницы, чтобы открыть веб-сайт. Кроме того, у меня есть расширенная анимация внутри самого сайта, которая начинается с масштабирования и вращения ДОБРО ПОЖАЛОВАТЬ изображение. Я хочу, чтобы изображение 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

Для цепи анимации, вы можете использовать параметр complete из .animate():

Полная функция

Если поставлено, полная функция обратного вызова запускается после завершения анимации . Это может быть полезно для последовательности различных анимаций в последовательности. Обратный вызов не отправляется ни одному аргументу , но он установлен на анимированный элемент DOM. Если анимированы несколько элементов, обратный вызов выполняется один раз за совпадающий элемент, не один раз для анимации в целом.

Это прекрасно работает для короткой цепи последовательных анимации, но если вам нужно ждать одновременно анимации для завершения (что это звучит, как вы) или есть длинный список анимация, чтобы пробежать, вы можете использовать deferred object 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(...); 
});