How can i make my animation will take same time duration for all system and browser?
<p>I am doing a animation, as a sample ( actually it needs for my project), In that animation i am moving a box from left to end of the page. it all works fine.</p>

<p>the problem is, it is differing from one browsers to another. ( the time duration of total journey). i made a function and i calculated the starting time and minus to current settimeout call, but i am confused whether it work correct of not. some different i found between firefox and chrome...</p>

<p>i red no.of articles, and i find out delta timing is the good option, but seriously i unable to understand how to calculate the delta time. with my understanding, i made this function :</p>

<pre><code>$(document).ready(function(){
                var startTime = +new Date();
                var wide = $(document).width();
                var add = 0;
                var boxWidth = 100;
                var moveBox = function(){

                    if($('#box').offset().left &lt; boxWidth){
                        add++;

                    }else{
                        clearTimeout(moveIt);
                        console.log(+new Date() - startTime);
                        return false;
                    }

                    var diff = +new Date() - startTime
                    var elapsed = 1000/diff;

                    console.log(1000-elapsed);

                    $('#box').css({left:add+'px'});
                    var moveIt = setTimeout(moveBox, (1000-elapsed));
                }
                moveBox();
            })
</code></pre>

<p>Can any one help me which i made this function is correct or incorrect? if so any one alter my code? else can any one explain me with a small function that how delta time has to calculate?</p>

<p>i am in confused state now, any one help me?</p>
