jquery淡出，淡入淡出，等待，淡入淡出

Question

我試圖存儲div的內容，暫時顯示一個感謝消息，然後放回div的原始內容。對於一些（可能是很多）原因，這是失敗的，我不明白爲什麼。我做錯了什麼？

$('#btn').on('click', function() { 
    //store original content 
    //appears to be a text string, rather than a jquery object 
    var content = $('#container').html(); 
    console.log(content); 
    $('#container').children().fadeOut(800, function() { 
     $('#container').html('<div id="thanks">Thanks!</div>', function() { 
      $('#thanks').fadeIn(800, function() { 

       var t=setTimeout(function(){$('#container').html(content)},3000) 

      }); 
     }); 
    }); 
});​ 

http://jsfiddle.net/gaZCW/

Answer 1

的HTML功能是同步的......沒有必要回調：http://jsfiddle.net/gaZCW/10/

$('#container').children().fadeOut(800, function() { 
    $('#container').html('<div id="thanks">Thanks!</div>'); 
    $('#thanks').fadeIn(800, function() { 
     $(this).delay(3000).fadeOut(800, function() { 
      $('#container').html(content).children().hide().fadeIn(800); 
     }); 
    }); 
}); 

另外，delay將變得更清潔（更c oncise）比在這種情況下設置超時。

Answer 2

的html函數只有一個參數。所以你的回調沒有被調用。

我檢查the source可以肯定：

html: function(value) { 

你可以這樣做：

$('#container').html('<div id="thanks">Thanks!</div>'); 
$('#thanks').fadeIn(800, function() { 
    var t=setTimeout(function(){$('#container').html(content)},3000) 
});