How do you know how jquery animates progress?

Question

I have a webpage that brings another page sliding on top ... I achieved this using jquery animation ... Now my query is how can I find out the percentage of progress of the animate () method ... How from the page glide begins before completion

thanks

Answer 1

You can use step -callback , which you pass in the animation parameters to execute the function at each step. You could study this.

 $('#myElement').animate({/*Your animation options.*/}, { step: function(current_number){ /* measure stuff using the first argument passed to this function */ } }) 

EDIT @Rocket made a demo .

Answer 2

Well, you determine the time of the animation. You can execute setInterval at the appropriate time interval. Like that .

 $(function() { $("#hello").animate({"height":600}, 10000); var percent = 0; var pointer = setInterval(function() { if (percent > 100) { clearInterval(pointer); return; } $("#Status").text(percent + "%"); percent++; }, 100); }); 

EDIT

I added code to clear the interval to the end. And updated the demo

EDIT

I updated Demo again. Here, the animate is responsible for stopping the interval. However, this is not brilliantly accurate.

Answer 3

You can use the step callback function built into the animation () and work out the percentage progress from this.

Answer 4

I hope this works

 <style> #frame{ width:400px; height:50px; border:1px solid #000; } </style> <div id="progress"></div> <div id="frame"></div> <script> $(document).ready(function(){ $("#frame").animate({height:'500'}, { step: function(now, fx) { $("#progress").text(now); }, complete: function(){ } }); }); </script>