Why is .fadeOut () not working, but .hide () works fine when hiding an added div in jquery?

Question

I want to show the div and delete it after a few seconds. It is just that simple. So in my html I have: <div id="msg"></div>

And I have this function:

 function showWarning(text) { $('<div>'+text+'</div>').appendTo('#msg').hide().fadeIn('fast').delay(1000).queue(function() { $(this).fadeOut(); }); } 

I can’t find a way to make this work. fadeOut() is called, but nothing happens on the screen. If I change fadeOut() to hide() , it works fine. However ... If I try hide(500) then this will not work.

I suppose this is something trivial - a beginner's mistake, but I can't find it.

thanks

Answer 1

fadeIn() should not be completed, use the callback function before doing your fadeOut.

 $('<div>'+text+'</div>').appendTo('#msg').hide().fadeIn('fast', function () { $(this).fadeOut(); }); 

Answer 2

 function showWarning(text) { $('<div />', {text: text}).fadeIn('fast', function() { $(this).delay(1000).fadeOut(600); }).appendTo('#msg'); } 

Fiddle

Answer 3

like this: http://jsfiddle.net/b7EV8/

 function showWarning(text) { $('<div id="msgtext">' + text + '</div>').appendTo('#msg').hide().fadeIn('fast', function() { $('#msgtext').delay(1000).fadeOut(); }); } showWarning('hello') 

Answer 4

 function showWarning(text) { $('<div>').text(text).appendTo('#msg').hide().fadeTo(400,1,function(){ $(this).delay(1000).fadeOut(); }); } 

demonstration