Как сделать непрерывную и плавную анимацию с jQuery в backgroundPosition?

Question

[Isaac Clark]

Здравствуйте, подскажите пожалуйста.

Есть код:

$('.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>

Он прокручивает бэкграунд 3 раза, как видите, но после каждого круга, когда анимация запускается следующий раз — это видно, так как есть небольшая задержка. Как мне объеденить эти 3 анимации в одну, так чтоб анимация прокрутки бэкграунда была плавной?

Спасибо.

Answer 1

[Виталий Желтяков]

Как я понимаю, то у Вас background «сбрасывается». Задержка вызвана перерисовкой страницы.
Поэтому можно:
— Использовать не линейную функцию.
— Сделать бесшовный спрайт и использовать одну анимацию место трёх.
— Сдвинуть координаты с учётом задержки.

Comments

[Александр Баталов]

— Использовать не линейную функцию.
Использовать именно линейную функцию, в остальном все верно.
И еще, зачем вам пустой delay()?

Answer 2

[Skull]

Может попробовать поиграться со задержками?
Длина анимации 400 мс, старат следующей после 390 мс

Answer 3

[Илья Шабанов]

по вашему коду сложно понять кокой нужен результат поделитесь примером на jsfiddle.net