FadeIn appended div with jQuery

I load some divs with append. Works, but I'd like to fade it in. Fade Out works but 开发者_如何学编程not fade in...

$("#click").click(function() {
    var overlay = $('<div id="overlay1">'),
    overlayBox  = $('<div id="overlay2">');
    $('body').append(overlay1, overlay2).fadeIn(500);                   
});

$("#click").click(function() {
    var overlay = $('<div id="overlay1">Test 1</div>'),
    overlayBox  = $('<div id="overlay2">Test 2</div>');
    $('body').append(overlay, overlayBox);
    overlay.hide().fadeIn(500);
    overlayBox.hide().fadeIn(500);    
});

Working example: http://jsfiddle.net/7Ycb5/

Also, just so you know - .append() is chainable, so doing $('body').append(overlay, overlayBox).fadeIn() wouldn't fade in the overlay and overlayBox but fade in the body.

Right now, you are adding fully opaque divs, and then trying to fade them in (which doesn't work. What are they fading from?) If you added the divs with Opacity = 0, then your code would work.