CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

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);                   
});

Upvotes: 1

Views: 235

Answers (2)

mattsven
mattsven

Reputation: 23283

$("#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.

Upvotes: 2

dlev
dlev

Reputation: 48596

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.

Upvotes: 1

Related Questions