Evgeny Fedorov2013-10-03 23:55:53
Evgeny Fedorov, 2013-10-03 23:55:53

Animation pixelisation? Or jQuery animation step smoothness

I decided to attach a progress bar to my project, I did it simply.

function progress(time) {
  $('.bar-wrap').animate( {

The width of the bar in pixels is 250, I noticed that every second n number of pixels is added, not 1. So the question is how can I make it add one pixel? indicate
it is impossible, the width of the bar is dynamic. The main task is actually to make an invisible process of progress. Different easyng-s don't help.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
Nikita Gusakov, 2013-10-04

I think you need to write a custom animation type

SiDChik, 2013-10-04

30000 is 30 seconds, it is logical that in one second there will be about 8-9 pixels per second. but in general it’s easier, if the speed is 1 pixel for one second, then make a second interval in which there will be an increase in progress, a check to stop the animation, etc.:

Vsevolod Rodionov, 2013-10-20

in jQuery, animation is done through requestAnimationFrame if possible, so that the animation step always matches the monitor's frame rate (unless there is some complex logic that slows everything down).
If rAF is not supported, the frequency is set using jQuery.fx.interval
Animations in jQuery are almost always as smooth as possible, if something twitches, you need to watch the main code stream, most likely the logic works out quite hard there.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question