задержка JQuery с несколькими селекторами

Question

Я знаю, что вы можете сделать что-то вроде этого:

$('#item').fadeOut().delay(1000).fadeIn(); 

, который будет исчезать элемент с идентификатором элемента из, а затем подождать секунду до замирания его снова. Но есть ли способ угаснуть один элемент, а другой - с задержкой между ними. Я попытался это, но он не работает:

$('#item1').fadeOut().delay(1000).('#item2').fadeIn(); 

Любая помощь очень ценится

Благодаря

Answer 1

Используйте функцию обратного вызова:

$("#item1").fadeOut(function() 
{ 
    $("#item2") 
      // Wait for 600 ms 
      .delay(600) 
      // Fade in 
      .fadeIn(); 
}); 

Смотрите доку: http://api.jquery.com/fadeIn/

fadeIn ([d uration], [ослабление], [обратный вызов])

длительность Строка или номер, определяющий продолжительность анимации.

easing Строка, указывающая, какую функцию ослабления использовать для перехода.

callback Функция для вызова после завершения анимации.

Answer 2

Затухает второй элемент внутри обратного вызова, предоставляя ему задержку вместо первого элемента.

Если вы хотите, чтобы задержка считать так же, как первый элемент начинает исчезать, вычесть скорость замирания из общей задержки:

// Assuming default fading speed of 400 ms 
var speed = 400, delay = 1000; 

$('#item1').fadeOut(speed, function() { 
    $('#item2').delay(delay - speed).fadeIn(speed); 
}); 

Если вы хотите задержки рассчитывать после того, как первый элемент закончил анимации, использовать полное значение задержки:

$('#item1').fadeOut(speed, function() { 
    $('#item2').delay(delay).fadeIn(speed); 
}); 

Answer 3

setTimeout(function() { $('#item1').fadeOut();}, 500); 
setTimeout(function() { $('#item2').fadeIn(); }, 1000);