How to make continuous and smooth animation with jQuery in backgroundPosition?

Question

JavaScript

Hello, tell me please.
There is a code:

$('.test').animate({ backgroundPosition: '-220px ' + posY }, 'linear', function () { $(this).css({ 'backgroundPosition': '-220px 0px'}) }).delay().<br>
               animate({ backgroundPosition: '-220px ' + posY }, 'linear', function () { $(this).css({ 'backgroundPosition': '-220px 0px'}) }).delay().<br>
               animate({ backgroundPosition: '-220px ' + posY }, 'linear', function () { $(this).css({ 'backgroundPosition': '0px 0px'}) });<br>

It scrolls the background 3 times, as you can see, but after each circle, when the animation runs the next time, you can see it, as there is a slight delay. How can I combine these 3 animations into one so that the background scroll animation is smooth?
Thank you.

Answer 1

As I understand it, your background is "reset". The delay is caused by page redrawing.
Therefore, you can:
— Use a non-linear function.
— Make a seamless sprite and use one animation instead of three.
— Shift coordinates taking into account the delay.

Answer 2

Maybe try playing with delays?
Animation length 400ms, start next after 390ms

Answer 3

according to your code it is difficult to understand what result you need share an example on jsfiddle.net