jquery - Jquery .html，然后 .fadeout

Question

我正在尝试更新.html('')，然后delay(400)，fadeOut然后更新.html('')，最后fadeIn再次...

if(data==1) {
var html = "an other text" 
$('#nyhedsbrev').html('<br/><p style=\"width:100%; text-align:center;\">Tak for din tilmelding</p><br/>');
$('#nyhedsbrev').delay(2000).fadeOut().html(html).fadeIn();
 }

如果我只使用第二行，或者我只尝试第一行，它就可以正常工作。然而，这些都行不通。

我还尝试将这两行合并 - 删除第二行$('#nyhedsbrev)。您能解释一下我如何首先显示新文本 - 然后将其淡出替换内部 html 然后淡入吗？

• • • • 澄清 - - - 问题是第一部分没有显示 - 淡出/淡入工作......

Answer 1

jQuery fadeIn / fadeOut（和其他动画方法）可以将回调作为第二个参数。

if(data==1) { 
    var newhtml = html;
    $('#nyhedsbrev').fadeOut(500, function() {
        $('#nyhedsbrev').html(newhtml).fadeIn();
    });
}

工作示例：jsFiddle

Answer 2

这个 jfiddle 有效..

http://jsfiddle.net/sN5e5/1/

$("#test").on('click', function(e) {
var oldhtml = "Tak for din tilmelding";
var newhtml = 'I m the new content of the div';
$('#nyhedsbrev').fadeOut(500, function() {
    $('#nyhedsbrev').html(newhtml).fadeIn();
    $('#nyhedsbrev').delay(2000);
    $('#nyhedsbrev').fadeIn(500, function() { $('#nyhedsbrev').html(oldhtml);  });
}); 

});