Search jQuery

jQuery Forum

Animations move at different speeds

in Using jQuery Plugins • 6 years ago

Hi,

So I'm trying to animate some "items" across the screen from right to left which I successfully managed but I am now trying to get the animations to stop when you hover your mouse over the items then start animating them again when the mouse is moved. I have successfully managed to stop the animation on hover but when resuming I can't get the items to move at the same speed. It seems the earlier items get slower and the later ones start overlapping them.

Here is what I have: https://jsfiddle.net/dgLxL2tr/3/

I print out the time variable used of how the long the animation should last, the translate value and a confirmation of the velocity. These numbers seem correct to me but they are not moving at the same speed.

If someone can push me in the right direction or find a solution that would be amazing!

Thank you.

Replies(6)

watusiware

Re: Animations move at different speeds

6 years ago

If you care about either performance or smooth animation, or if your animation is complex, don't use jQuery animation. It is a dinosaur from the olden days, at a time when CSS animation did not yet exist.

And I don't think there is much interest on the part of the developers to improve it. I think if jQuery were just now being written today, the authors would almost certainly have omitted animation functions.

CSS animation will do a better job for most tasks. But if you have some more complex needs, there are excellent high-performance JS animation libraries that will leave jQuery animation in the dust.

watusiware

Re: Animations move at different speeds

6 years ago

Sorry, I didn't look at your Fiddle. I see you are using Velocity.

You would probably have more luck on a Velocity forum!

I'm leaving my original reply for the benefit of others. I went and took a look at the Fiddle, because I was wondering why this was in the "plugins" section...

Safinn

Re: Animations move at different speeds

6 years ago

Thanks for replying. I found out jquerys animation problem the hard way. Still have a little stutter with velocity. I thought I'd post here as velocity is based on jquery and the issue should not be because of velocity but something I have misunderstood.

watusiware

Re: Animations move at different speeds

6 years ago

I thought I'd post here as velocity is based on jquery

Velocity isn't based on jQuery. It's an independent Javascript library, and doesn't need jQuery.

But it does have the a secondary API that mimics jQuery's animation functions, and so can be used to conveniently retrofit code that was written for jQuery animation.

If you are starting from scratch, it would be better to use Velocity's native API. (I see in your fiddle, though, you are already using the Velocity native API.)

From the Velocity home page:

Basics: Performance

Never use jQuery's $.animate() and $.fade() functions. They slow everything else down, including other animation libraries.

Always use Velocity's built-in solutions instead of rolling your own (or relying on jQuery): looping, reversing, delaying, hiding/showing elements, property math (+, -, *, /), and hardware acceleration can all be done within Velocity. Refer to the documentation below.

Safinn

Re: Animations move at different speeds

6 years ago

Oh right. Thanks for that. Is how I'm using it bad for performance? Would it be better to include it before Jquery and use it as Velocity(..) instead of $('.item').velocity(..).

watusiware

Re: Animations move at different speeds

6 years ago

I dunno. The Velocity site makes conflicting statements. You should ask on some Velocity support forum!

Maybe there was once a performance issue if you used it through the jQuery API, and they fixed it.

The home page both states that you should avoid using jQuery.animate and then later down the page it says there is no performance penalty!

Would it be better to include it before Jquery and use it as Velocity(..) instead of $('.item').velocity(..)

The performance warning was about using $.animate()

(BTW, our wonderful form software seems to have stopped highlighting quotations today...)

Top Reply

Response title

Attachments

jQuery Forum

Animations move at different speeds

Replies(6)

Re: Animations move at different speeds

Re: Animations move at different speeds

Re: Animations move at different speeds

Re: Animations move at different speeds

Basics: Performance

Re: Animations move at different speeds

Re: Animations move at different speeds

Statistics

Tags

Actions