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?

score 4 · Answer 1 · answered Oct 08 '11 at 23:30

4

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

answered Oct 08 '11 at 23:30

vantrung -cuncon

score 3 · Answer 2 · answered Oct 08 '11 at 23:31

3

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

It hides it and then fades in

answered Oct 08 '11 at 23:31

genesis

Works perfectly, think I was overcomplicating things :p – novactown Oct 08 '11 at 23:34

score 2 · Answer 3 · answered Feb 17 '16 at 15:10

2

Short way:

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

answered Feb 17 '16 at 15:10

3 Answers3