我正在尝试存储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)
});
});
});
});
答案 0 :(得分: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)
});
答案 1 :(得分:0)
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
比在这种情况下设置超时更清晰(更简洁)。