Как сделать постоянную анимацию с помощью jquery

Question

Я хочу использовать .animate функцию, но у меня есть некоторые проблемы, я хочу изменить значение «left», но я не знаю ширины элемента, который я буду перемещать, поэтому, если я отправил анимировать таймер до 1000, а ширина моего элемента - 100 пикселей, что будет отличаться, если ширина моего элемента составляет 500 пикселей, а для анимации, когда он приближается к концу его цели, он становится быстрее, все равно перемещается мой элемент без беспокоясь о скорости и таймауте?

Answer 1

Если я вас правильно понял, вы хотите изменить слева от пункта вы оживляющий, но вы хотите, чтобы двигаться с постоянной скоростью , не полными в постоянная время. Фактически перемещение элемента с постоянной скоростью является способом по умолчанию для анимации в javascript (setInterval, setTimeout и т. Д.). JQuery - это ярлык для людей, которые не хотят выполнять утомительные вычисления, связанные с (более частым) случаем от необходимости перехода в постоянное время.

Итак, двумя способами вы можете это сделать. Один: не используйте JQuery для этой анимации. Используйте setInterval или setTimeout с проверкой разницы дат. Два: используйте JQuery, но вычисляйте ширину, чтобы вы могли отменить вычисление продолжительности времени. Вы можете получить ширину любого объекта JQuery с помощью .width(). Из этого вы можете рассчитать расстояние, которое нужно преодолеть, и разделить его на скорость (в пикселях в секунду), которую вы хотите сохранить постоянной, чтобы получить время для подключения к функции анимации JQuery. Имеют смысл?

Answer 2

Этот плагин делает именно то, что вы ищете: https://github.com/lukeshumard/supremation

Answer 3

Если кто-то попадает на этот пост функцию одушевленные JQuery() имеет свойство, называемое линейным. $(). Animate ({''}, speed, linear) Это заставит функцию animate() перемещаться с постоянной скоростью.