Как сделать один набор функций после другого набора в Javascript?

Question

я в настоящее время есть блок Javascript, который служит в качестве интро на мой сайт:

$('.welcome').fadeIn(500); 
    }, 3600) 
    setTimeout(function() { 
     $('.welcome').fadeOut(500); 
    }, 5100) 
    setTimeout(function() { 
     $('.quotable').fadeIn(800); 
    }, 5600) 

    setTimeout(function() { 
     $('.quotable').animate({ 
      "margin-top" : 0, 
      "font-size" : '20px' 
     }, 2000) 
    }, 6000) 
    setTimeout(function() { 
     $('.quotable').fadeOut(1500); 
    }, 7000) 

И пытаюсь сделать этот следующий блок кода, который будет на главной странице, запустить после ее завершения:

$('.nav').fadeIn(1500) 
$('#background').fadeIn(1500) 

    setTimeout(function() { 
     $('#background').fadeOut(1500); 
    }, 8000) 
    setTimeout(function() { 
     $('#background2').fadeIn(1500); 
    }, 8000) 

Я попытался сделать обратный вызов, но он не сработал.

Вот HTML:

<div class="welcome">welcome to</div> 
<div class="quotable">the quotable</div> 


<div class = "images"> 
<div id="background"> 
    <img src="Image1.jpg" alt=""> 
</div> 
<div id="background2"> 
    <img src="Image2.jpg" alt=""> 
</div> 
</div> 


<div class = "nav"> 
    <ul> 
     <li class="left"><a href="#" class="quotes">Quotes</a> 

      <ul class="menu"> 
       <li id="philosophy"><a href="#">Philosophy</a> 
       </li> 
       <li id="love"><a href="#">Love</a> 
       </li> 
      </ul> 
     </li> 
     <li class="right"><a href="#">About</a></li> 
    </ul> 
</div> 

И CSS:

.welcome { 
    color: black; 
    font-family: Copperplate; 
    position: absolute; 
    font-size: 60px; 
    z-index: 3; 
} 

.quotable { 
    color: black; 
    font-family; Copperplate; 
    position: absolute; 
    font-size: 60px; 
    z-index: 4; 
} 

#background { 
position: fixed; 
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%; 
} 

#background img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
} 

#background2 img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
} 

.nav { 
    background: #333; 
    font-size: 15px; 
    color: #000000; 
    margin: 0; 
    width: 100%; 
    position:fixed; 
    bottom: 0; 
    list-style-type: none; 
    opacity: 0.75; 
    padding: 0; 
    z-index: 150; 
} 

.nav ul, li, a { 
    margin: 0; 
    padding: 0; 
    z-index: 150; 
} 

.nav li { 
    list-style: none; 
    z-index: 150; 
} 


ul > li { 
    float: left; 
    z-index: 150; 
} 
.nav ul > li a { 
    color: #fff; 
    font-weight: bold; 
    line-height: 40px; 
    height:40px; 
    display:block; 
    padding:0px 10px; 
    z-index: 150; 
} 
.nav a:hover { 
    background-color: #111; 
    color: white; 
    text-decoration: none; 
    z-index: 150; 
} 

Пожалуйста, помогите!

Answer 1

Вы можете использовать относительные setTimeouts, например, так:

$(element).fadeOut(1500, function() { 
    setTimeout(function() { 
     $(nextElement).fadeOut(500, function() ... 
    }, 500); //do next animation in .5 seconds 
} 

Или еще лучше, вы можете посмотреть в CSS3 анимацию, или даже обещания, как этот вопрос: How do I animate in jQuery without stacking callbacks?

Answer 2

Вы можете передать другую функцию эффекты jQuery, которые выполняются после анимации, которая, по моему мнению, более чистая, чем много вложенных тайм-аутов.

$("h1").fadeIn('slow', function() { 
    $("h2").fadeIn("slow", function() { 
     $("h3").fadeIn("slow"); 
    }); 
}); 

https://jsfiddle.net/34nqqjqv/

Вы также можете использовать этот подход для JQuery анимации и передать в функции обратного вызова.

Answer 3

Как и в обычной практике, я бы рекомендовал использовать обратные вызовы или обещания, чтобы функция запускалась правильно, когда она в состоянии, и у вас нет времени ожидания, ожидающего следующего триггера. Я использую таймауты, которые отлично подходят для анимации и UX, однако, если вы не размещаете таймауты в обратном вызове, у вас может быть кровотечение из одной функции в другую, если время по какой-либо причине отключено.

Это метод обратного вызова.

step1(function (value1) { 
    step2(value1, function(value2) { 
     step3(value2, function(value3) { 
      step4(value3, function(value4) { 
       // Do something with value4 
      }); 
     }); 
    }); 
}); 

Это метод обещаний. (Для обещания работать вам будет нужна библиотека как q)

Q.fcall(promisedStep1) 
.then(promisedStep2) 
.then(promisedStep3) 
.then(promisedStep4) 
.then(function (value4) { 
    // Do something with value4 
}) 
.catch(function (error) { 
    // Handle any error from all above steps 
}) 
.done();