Как предотвратить функцию javascript от рендеринга перед другой функцией рендеринга?

Question

Теоретически говоря, я имею 3 функции javascript (jquery), которые создают визуальные эффекты. Если я хочу, чтобы один из них отображался после того, как первые два были отображены, как я могу это сделать?

Javascript:

<script type="text/javascript"> 

$(function() { 
var transition = 'slow'; 
var target1 = $('#somediv'); 
var target2 = $('#second_div'); 
var target3 = $('#third_div'); 
target1.delay(5000).fadeIn(); 
target2.delay(target2Time).fadeIn(); 
target3.delay(target3Time).fadeIn(); 
}); 
</script> 

<script type="text/javascript"> 
$.fn.teletype = function(opts){ 
var $this = this, 
    defaults = { 
     animDelay: 50 
    }, 
    settings = $.extend(defaults, opts); 

$.each(settings.text, function(i, letter){ 
    setTimeout(function(){ 
     $this.html($this.html() + letter); 
    }, settings.animDelay * i); 
}); 
}; 

$(function(){ 
$('#second_div').teletype({ 
    animDelay: 200, 
    text: 'Hello, this is your classmate!' 
}); 
}); 
</script> 

HTML:

<div id="somediv">Some Content</div> 
<div id="second_div"></div> 
<div id="third_div">Some third content</div> 

Answer 1

Я сделал это демо. Он демонстрирует, как сделать один анимации ждать две другие анимации закончить:

var anim1 = $('#elem1').animate({ width: 200 }, 3000); 
var anim2 = $('#elem2').animate({ width: 200 }, 2000); 

$.when(anim1, anim2).done(function() { 
    $('#elem3').animate({ width: 200 }, 1000); 
}); 

Живая демонстрация:http://jsfiddle.net/m67Ua/

---

Вы можете применить тот же метод для ваших требований замирания:

var fade1 = $('#img1').fadeIn(3000); 
var fade2 = $('#img2').fadeIn(2000); 

$.when(fade1, fade2).done(function() { 
    $('#img3').fadeIn(1000); 
}); 

Демо-версия:http://jsfiddle.net/m67Ua/1/

Answer 2

Подобно тому, как улучшение, вы можете передать массив анимации

var array = new Array(); 
array.push($('#img1').fadeIn(3000)); 
array.push($('#img2').fadeIn(2000)); 

А потом фокус в том, изменение из массива в список аргументов, как и следовало ожидать от JQuery, используя применять метод

$.when.apply(this, array).done(function() { 
    $('#img3').fadeIn(1000); 
}); 

Живая демонстрация:

http://jsfiddle.net/m67Ua/2/

Answer 3

я нуждался в функции обратного вызова и сделано, так что проверить это:

$.when(
    $('#container .item') 
     .animate({"opacity": "0"}, 1000, 
      function onCallbackForEach() { 
       console.log('callback on element called'); 
      }) 
).done(function onFinally() { 
    console.log('done called'); 
}); 

, который дает мне доступ для обработки элементов, каждый после анимации (например, замените старый с ними) и, кроме того, с одним обратным вызовом выполнить работу после того, как все анимации закончены ...