Jquery to fade in .after()?

Question

Simple really but cannot get it to work, here is my script...

$('body').after('<div id="lightBox" style="height: ' + htmlHeight + 'px;"></div>');

How can I get it to fade in rather than just pop up? putting fadeIn() after or before .after() doesn't work?

Noella

Answer 1

$('body').after('<div id="lightBox" style="height: ' + htmlHeight + 'px; display:none;"></div>');
$('#lightBox').fadeIn();

Superphysical

Answer 2

$('body').after('<div id="lightBox" style="height: ' + htmlHeight + 'px;"></div>');  
$("#lightBox").hide().fadeIn();

It hides it and then fades in

Disadvantage

Works perfectly, think I was overcomplicating things :p – Noella

Answer 3

Short way:

$('body').after($('<div id="lightBox" style="height: ' + htmlHeight + 'px;"></div>').hide().fadeIn());

Racon

This would be a better answer if it included an explanation along with the code. – Featly