jQuery没有显示附加内容

Question

当我在源文件中删除调试点时，我可以看到以下图像：

但是当我删除这个调试点时，我只看到以下内容：

颜色的变化受到具有一些不透明度的叠加的影响。

相关代码是：

  flashSuccessMessage = function(msg) {
    $('#overlay').hide();
    var $ch = $("#content-header");
    $ch.after('<div id="flash_message" class="alert"></div>');
    var $fm = $("#flash_message");
    $fm.addClass("alert-success");
    $fm.append(msg);
    $fm.show().children().show();
    $fm.fadeOut(3000);
    $fm.empty();
  }

在这种情况下，msg是“成功添加的作业类型”

我无法理解为什么在我调用$ fm.append（msg）之后我在执行中断时才看到该消息; 在那之后我（三条线）中断的并不重要，它会出现。 当我没有任何中断并让页面执行脚本时，会出现绿色警报，但没有单词。

有任何想法吗？

我在这里尝试了各种jQuery方法 - 而不是使用.html（）代替.append（），我尝试在flash_message id中插入msg开始，尝试插入包含在内的消息

标签，尝试重新订购的东西，（但我需要在结束时清除这个div的内容...）

我已经使用了jQuery的.delay（）方法等。它是否跳转到执行.empty（）尽管其他元素使用计时器来完全执行？

Answer 1

添加一个回调到你的fadeOut以便在$fm被完全隐藏之前不会清空内容：

  flashSuccessMessage = function(msg) {
    $('#overlay').hide();
    var $ch = $("#content-header");
    $ch.after('<div id="flash_message" class="alert"></div>');
    var $fm = $("#flash_message");
    $fm.addClass("alert-success");
    $fm.append(msg);
    $fm.show().children().show();
    $fm.fadeOut(3000, function(){   // empty() is not called until
      $(this).empty();              // the animation is complete
    }); 
  }

如果没有回调，则在fadeOut()之后立即触发empty()方法。 这会导致在动画完成之前清空内容。

有关jQuery的fadeOut方法的更多信息可以在文档中找到。

Answer 2

JQuery中的动画是异步的，因此代码会在动画发生时继续执行。 .fadeOut有一个完成块，您可以在http://api.jquery.com/fadeOut/上阅读。

因此，不应在动画后调用fm.empty（），而应将其放在函数中并将该函数传递给淡出。 然后在动画完成后运行该函数。

Answer 3

但我需要在最后清除这个div的内容......

使用html代替append ：

$fm.html(msg);
$fm.fadeOut(3000, function(){
  $fm.empty();
}); 

检查fadeOut文档：

.fadeOut( [duration ] [, complete ] )

complete类型：Function（）动画完成后调用的函数。