html - jQuery fadeIn() not working with fadeOut() -

i'm having little issue jquery fadein() function. basically, have 1 part of screen serves main display. want fade divs in , out of area. currently, have works fading out div starts out there, when attempt fade other div in, nothing happens. here code have far.

$('#aboutbtn').click(function(e){         $('#slideshowcontainer').fadeout('fast', function(){         $('#slideshowcontainer').replace('<div id="about"></div>').fadein('slow');         }); 

like said, fades out slideshowcontainer div, div not come in it's place.

update --

well, embarrassing, lol. i'm trying reference div have in html, guess replacewith('') makes no sense.

if wanted replace div have defined in html document, shouldn't work?

$('#aboutbtn').click(function(e){     $('#slideshowcontainer').fadeout('fast', function(){     $('#slideshowcontainer').replace('#about').fadein('slow');     }); 

the id of div want replace faded out div about. when this, however, displays #about.

jquery object doesn't have replace method, use replacewith:

$('#slideshowcontainer').fadeout('fast', function() {     $(this).replacewith(function() {         return $('<div id="about">about</div>').hide().fadein();     }); }); 

http://jsfiddle.net/ypgwl/

update:

$('#slideshowcontainer').fadeout('fast', function () {     var $d = $('#about');     $(this).replacewith($d);     $d.fadein(); }); 

http://jsfiddle.net/ujwqw/