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