javascript - how to make constant animation using jquery - Stack Overflow

admin管理员组

文章数量:1326099

i want to use .animate function but i have some problems i want to change the 'left' value but i don't know the width of the item that i will move so if i sent to animate timer to 1000 and the width of my item is 100px that will be different if the width of my item is 500px and for the animate when it es near the end of it's target it bee faster, is there anyway to move my item without worrying about speed and timeout ?

i want to use .animate function but i have some problems i want to change the 'left' value but i don't know the width of the item that i will move so if i sent to animate timer to 1000 and the width of my item is 100px that will be different if the width of my item is 500px and for the animate when it es near the end of it's target it bee faster, is there anyway to move my item without worrying about speed and timeout ?

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 22, 2014 at 5:24 trrrrrrm asked Feb 25, 2010 at 2:40 trrrrrrmtrrrrrrm 11.8k2525 gold badges8787 silver badges131131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

If I understand you correctly, you want to change the left of the item you are animating, but you want it to move at a constant speed, not plete in a constant time. In fact moving an item at a constant speed is the default way of animating in javascript (setInterval, setTimeout, etc.) JQuery is a shortcut for the people who don't want to do the tedious calculations involved in the (more frequent) case of wanting a transition to occur in constant time.

So, two ways you can do it. One: Don't use JQuery for that animation. Use setInterval or setTimeout with a Date difference check. Two: Use JQuery but calculate the width so you can reverse calculate the time duration. You can get the width of any JQuery object with .width(). From this you can calculate the distance that needs to be traveled and divide that by the speed (pixels per second) you want to stay constant to get the time to plug into the JQuery animate function. Make sense?

If anyone lands on this post the JQuery function animate() has a property called linear. $().animate({''}, speed, linear) This will make the animate() function move at a constant speed.

This plugin does exactly what you're looking for: https://github./lukeshumard/supremation

本文标签： javascripthow to make constant animation using jqueryStack Overflow