There is no need of jQuery in this atall , its just a basic I am using your function to explain how thats done.

   function showDiv(divID)

   {

       if(document.getElementById(divID).style.display=='none')

       {

           document.getElementById(divID).style.display='block';  

       }

}

What your function is doing is basically removing the whole Element from BOX Model ( the toggle of block and none removes the element totally from the BOX Model so it doesnt occupies any space or anything , this but may / may not cause some layout issues );

Now to animate it in slow motion you need a timing function.

a timing function is a simple mathematical function which gives the value of the property ( opacity in your case ) for a given time or depending on other parameters .

Other then that you also need to use properties like opacity in order to fade it (Opacity is a CSS property that defines the transparency of an element and its childrens )

So let us begin with a very basic show / hide using setTimeout Function in JS.

function getValue(t,dir){



  if( dir > 0){

   return 0.5*t; /* Y = mx + c  */

  }else{

   return 1-(0.5*t);

  }

  /* 

    Here the slope of line m = 0.5.

    t is the time interval.

  */

}





function animator(divID){

      if(!(this instanceof animator)) return new animator(divID); /* Ignore this */

  var Node = document.getElementById(divID),

      start = new Date.getTime(), // The initiation.

      now = 0,

      dir = 1,

      visible = true;

  function step( ){

    now = new Date.getTime();

    var val = getValue( now - start,dir)

    Node.style.opacity = val;

    if( dir > 0 && val > 1 || dir < 0 && val < 0 ){

      visible = !(visible*1);

      // Optionally here u can call the block & none 

      if( dir < 0 ) { /* Hiding  and hidden*/

        Node.style.display = 'none'; // So if were repositioning using position:relative; it will         support after hide 

      }

      /* Our animation is finished lets end the continous calls */

      return;

    }

    setTimeout(step,100); // Each step is executated in 100seconds

  }

  this.animate = function(){

    Node.style.display = 'block';

    dir *= -1;

    start = new Date.getTime();

    setTimeout(step,100);

  } 

}

now you can simply call the function

  var magician = new animator('divName');

then toggle its animation by

  magician.animate();

Now playing with the timing function you can create whatever possibilities you want as in

  return t^2 / ( 2 *3.23423 );

or even higher polynomial equations like

  return t^3+6t^2-38t+12;

As you can see our function is very very basic but it explains the point of how to make animations using pure js . you can later on use CSS3 module for animation and trigger those classes with javascript :-)

Or perhaps write a cross browser polyfill using CSS3 where available ( it is faster ) , and JS if not :-) hope that helps