Jerky Animation on Page

[Siberian]

This jQuery code works, but when translated to the actual page, it's jerky ?

[Link]

[pritaeas]

Not for me. What exactly is jerky?

[almostbob]

jerky,
till I paused the AV and MBAM scans running in the background
what else is running?

[Siberian]

I know it's smooth on jsFiddle but when I translate the script to the actual page, the animation is jerky ? Want the link to the actual page ?

[pritaeas]

Probably more content and other JS interacting.

[Siberian]

Pritaeas, sorry I don't understand what you mean ?

[almostbob]

It was jerky for me, on jsfiddle
I was doing a lot of other stuff at the same time

Pritaeas suggests there is something else going on / running in the site that makes it jerky, some other active content or javascript
or are you doing something else while you are editing the site content

[Siberian]

There is nothing I was or am doing in the background, when the script code executes.

[almostbob]

nothing on the site?

[Siberian]

Pritaeas suggests there is something else going on / running in the site that makes it jerky, some other active content or javascript
or are you doing something else while you are editing the site content [?]

And so my reply was;

There is nothing I was or am doing in the background, when the script code executes that could make the animation jerky !

[Airshow]

To give the animation every chance of being smooth, make sure there's no document reflow.

ie. make sure the div animates into a reserved space. eg. wrap #block in another div with width and height set to accommodate the div at its maximum size.

Also, chain the jQuery, so #block does not need to be discovered twice - $('#block').css(...).animate(...)

If it's still jerky, then it's because your computer's processor and/or graphics card is too busy with other tasks. This something you can't really fix, at least for js amimations. With these modern computers, we have little knowlege or control over processor usage.

It's a risk you run with any js animation. Even if your own computer runs it smoothly, there's no guarantee some other end-user's computer will be so cool.

Flash animations are diffferent. They (are far more likely to) hog the processor for the duration.

[Siberian]

Solved !
The problem was the animation in particular. I changed the animation type and it's smooth !

[JorgeM]

Just for the benefit of anyone else that may have a similar problem, you do realize that the animation you were using (easeOutBounce) sort of creates that "jerky" effect as appposed to "linear".

So was there really a "jerky" problem, or did you simply use an effect that you didnt intend on using?

[Siberian]

I was unaware that the nature of easeOutBounce created a jerky effect, to sum it up !

[Airshow]

But you are seeing a difference in the effect between the fiddle and the fully worked up page, yes? That's where you started out above.

[Siberian]

Yes, until I was informed that is the nature of the effect !

[Airshow]

So yes, there was a differnce but it disappeared when you became better informed.

Good job I asked!