javascript - 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函数只接受一个参数。所以你的回调不会被调用。

我检查了来源以确保：

html: function( value ) {

你可以这样做：

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

Answer 2

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在这种情况下，将比设置超时更简洁（更简洁）。