jQuery延遲與多個選擇器

Question

我知道您可以執行以下操作：

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

它將淡出id為item的元素，然后等待一秒鍾，然后再次淡入。 但是有沒有一種方法可以淡出一個項目，然后將另一個項目退回，並且之間會有延遲。 我已經嘗試過了，但是沒有用：

$('#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（[持續時間]，[緩動]，[回調]）

持續時間一個字符串或數字，確定動畫將運行多長時間。

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);