javascript - jQuery not displaying appended content -

when drop debug point in source file can see following image:

but when remove debug point, see following:

the change in color affected overlay opacity.

the relevant code is:

  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();   } 

and in case msg "job type added successfully"

i can't understand why see message when break on execution after point call $fm.append(msg); doesn't matter break on after (of 3 lines), appear. when don't have break , let page execute script, green alert appears no words.

any ideas?

i've tried various jquery methods here - instead of .append() using .html() example, , i've tried inserting msg inside flash_message id begin, tried inserting message wrapped in

tags, tried re-ordering things, (but need clear contents of div @ end...)

i've used jquery's .delay() method, etc. jumping executing .empty() despite other elements using timer execute?

add callback fadeout contents aren't emptied until $fm hidden:

  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() not called until       $(this).empty();              // animation complete     });    } 

without callback, empty() method being triggered after fadeout(). causes content emptied before animation complete.

more information on jquery's fadeout method can found in docs.