Animation pixelisation? Или плавность шага анимации jQuery

Question

[Евгений Федоров]

Решил прикрутить прогресс бар к своему проекту, сделал просто.
**Javascript**

function progress(time) {
  $('.bar-wrap').animate( {
    width:'100%'
  },time,'linear');
}
progress(30000);

Ширина бара в пикселях 250, я заметил что каждую секунду прибавляется n количество пикселей, а не 1. Так вот вопрос как можно сделать так, что бы прибавлял один пиксель? Указывать

width:'250px'

нельзя, ширина бара динамическая. Главная задача на самом деле это сделать невидимый процесс прогресса. Разные easyng-s не помогают.

Comments

[Владимир]

Не совсем понятна задача. Вы хотите, чтобы скорость всегда была 1 пиксель в секунду? Просто если у вас есть конкретная ширина и вы вручную задаёте время, то и скорость будет соответствующая этим двум величинам.

Answer 1

[Никита Гусаков]

Мне кажется вам нужно написать кастомный тип анимации
anton.shevchuk.name/javascript/jquery-for-beginners-write-animation-plugins/

Answer 2

[SiDChik]

30000 — это 30 секунд, логично же что в одну секунду будет порядка 8-9 пикселей в секунду. а вообще проще, если скорость 1 пиксель одна секунда, то и сделать интервал секундный в котором будет увеличение прогресса, проверка на остановку анимации и тд:

Answer 3

[Всеволод Родионов]

в jQuery анимация по возможности делается через requestAnimationFrame, если он есть, так что шаг анимации всегда соответствует частоте кадров монитора(если нет сложной логики, которая все тормозит).
Если rAF не поддерживается, частота задается с помощью jQuery.fx.interval
Анимации на jQuery почти всегда по возможности плавные, если что-то дергается — надо смотреть основной поток кода, там скорее всего логика отрабатывает достаточно тяжело.