Question

I want the javascript code to show a div in slow motion.

function showDiv(divID)
{
       if(document.getElementById(divID).style.display=='none')
       {
           document.getElementById(divID).style.display='block';  
       }
}

Here div appears, but not in slow motion. Can anyone help ??
Thanks in advance

Dev..

Answer 1

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