Jquery .html，然后 .fadeout答案

【问题标题】：Jquery .html, then .fadeoutJquery .html，然后 .fadeout
【发布时间】：2013-05-04 09:00:46
【问题描述】：

我正在尝试更新.html('')，然后是delay(400) 和fadeOut，之后更新.html('')，最后fadeInagain...

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 然后淡入吗？

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

【问题讨论】：

html(html)???.. 你还没有在任何地方定义html.. 或者我错过了什么
html 是 if 之前的内部 html - 该部分有效:)

标签： jquery fadein innerhtml fadeout

【解决方案1】：

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

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

工作示例：jsFiddle

【讨论】：

+1 只是一件事，默认淡出持续时间是 400 而不是 500
我想要实现的是：-首先存储原始文本-然后显示临时消息-然后淡出-然后恢复原始文本-然后淡入
您的解决方案仅替换文本 - 因此，它不会执行我需要的操作...
如果有动画队列 (api.jquery.com/delay)，延迟有效。如果您需要在没有/之前为项目“计时”，则需要使用 setTimeout。

【解决方案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);  });
});

});

【讨论】：