jquery - fade out, fade in new div when click outside div -

i've got page jquery following, , need last step:

the page contains div (#"containersw") switches content , forth when button (#"doit") pressed.

the content of 'containersw' 2 divs ('div1' , 'div2') contain images. these images function buttons load entirely new div (#"containerpra") in place of parent div 'containersw' (see input of first image in 'div1').

so far works, except i'm trying make click function fades out 'containerpra go 'containersw', when click outside of 'containerpra'. i've attempted mouseup function below, can't 'containersw' fade in: appears fast on page.

i think problem lies in children divs of 'containersw', i'm not sure how solve ..

the html:

<input id="doit" type="image" src="img/array_arrow_rightii.jpg" height=120px width 40px   value="clickme">   <div id="containersw"> <div id="div1">     <img class="sw">     <input id="loadpra" type="image" src="img/sw_a.jpg" height=125px width 125px >     <img src="img/sw_b.jpg" height=125px width 125px>     <img src="img/sw_c.jpg" height=125px width 125px>     <img src="img/sw_d.jpg" height=125px width 125px> </div> <div id="div2">     <img class="sw">     <img src="img/sw_e.jpg" height=125px width 125px>     <img src="img/sw_f.jpg" height=125px width 125px>     <img src="img/sw_g.jpg" height=125px width 125px>     <img src="img/sw_h.jpg" height=125px width 125px> </div> </div>  <div id="containerpra" class="hidden">  <img src="img/sw_divtester.jpg" height=150px width=400 >  </div> 

the css:

#div1 { } #div2 {     display: none; } .hidden {     display:none;     background-color:red; } #containerpra {     height:400px;      width:800px;     background-color: blue; } 

the script:

$(function () { var vis = 1; $('#doit').click(function () {     $('#containersw').fadeout('slow', function () {         $('#div'+vis).hide();         vis = vis === 1 ? 2 : 1;         $('#div'+vis).show();         $('#containersw').fadein('slow');     }); }) });  $(function(){ $('#loadpra').click(function(){     $('#containerpra').hide();     $('#containersw').fadeout('slow', function() {     $('#containerpra').removeclass('hidden');     $('#containerpra').fadein('slow');       }); }) });   $(document).mouseup(function (e) { var container = $('#containerpra'); var containersw = $('#containersw');   if (!container.is(e.target) // if target of click isn't container...     && container.has(e.target).length === 0); // ... nor descendant of container  if (!containersw.is(e.target) // if target of click isn't container...     && containersw.has(e.target).length === 0) // ... nor descendant of container  {     container.fadeout('slow');     containersw.fadein('slow'); }  }); 

any regarding last step great.!

use callback. make sure fade in starts when fadeout ends.

container.fadeout('slow',function(){ containersw.fadein('slow'); });