fadeIn / fadeout document.getElementById("middlediv").innerHTML

fadeIn / fadeout document.getElementById("middlediv").innerHTML

Trying to get my head around JavaScript and Jquery and am working on some samples.  To replace div content I am using document.getElementById("middlediv").innerHTML activated by the menu item <a href="javascript:eventdivreplace(0);"> calling the appropriate content based on the selected id. 

That works fine, but...

I like the jquery fadeIn and fadeOut effects and am not clear how I can attach this functionality so that when the divs being replaced there is a smooth transition between them. 

How is that done?   

Does anyone know of a nice working sample? 

Thanks so much,

RJ