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.