javascript - How do I show/hide divs accurately using jQuery? -

i'm working on mini project interview people on short gif animations. need let people see gif 10 seconds , code, i've realised timer inaccurate.

i've searched around , found fix in sitepoint article james edwards. in javascript , i've been trying combine js , jquery no success @ all.

here

$(function() {     //when showing image     settimeout(function() {         $("#div2").fadeout(0);     }, 10000) //edit timer      $('#btnclick').click(function() {         $('#div2').show();         settimeout(function() {             $("#div2").fadeout(0);         }, 10000)         $('#div3').delay(10000).fadein(0);  //show interview     })   }) 

the code works fine want implement self-adjusting mechanism described on sitepoint. has done before or know how can this?

the html here:

<div id="div1" class="div1">      <!--show image button-->     <center>         <input type="button" id="btnclick" value="show me image" />             </center> </div> <div id="div2" class="main" style="display:none;">      <!--image-->     <img src="timer.gif"/> </div> <div id="div3" class="main" style="display:none;">      <!--form-->     <form> >     </form> 

thanks in advance.

in jquery, can use:

 $('#mydiv').show();  $('#mydiv').hide(); 

i believe fadein(0) should work fadein , fadeout doing animation, , parameters you're giving on 0 millisecond, instantly still has animation (which isn't program speed). best way if want optimisation create css class this:

 .is-hidden{      display: none;   } 

and in jquery

$('#mydiv').toggleclass('is-hidden');