Анимация div с фоновым изображением справа налево - PullRequest
Новая
       18

Анимация div с фоновым изображением справа налево

0 голосов
/ 20 февраля 2012

У меня есть div, который, по сути, действует как маска для своего фонового изображения, показывая только определенную часть изображения.

Фоновое изображение выровнено вправо. Я пытаюсь анимировать backgroundPosition справа налево, ОДНАКО, анимация автоматически сбрасывает положение фона влево (или очень близко к левому краю - я не могу понять, откуда исходит позиция).

Есть ли способ преодолеть это?

Пример кода: http://jsfiddle.net/QRkLr/
(обратите внимание, что при запуске анимации фоновое изображение НЕ выровнено совершенно вправо).

1 Ответ

0 голосов
/ 20 февраля 2012

Начальная позиция X вашей маски должна быть числом, а не «правильной».Если я не ошибаюсь, любое число (в процентах или в пикселях), присвоенное background-position, рассчитывается слева.

Итак, мое исправление: сохранить css: background-position: top right;, но затем до анимации,вычислить требуемую начальную позицию X слева, а затем анимировать обратно к 0 (слева): 

$("#image").css({backgroundPositionX: -large_left_border})
     .animate({backgroundPositionX: 0}, 1500);

См. fiddle

РЕДАКТИРОВАТЬ

Итог: background-position-x не поддерживается Firefox, а .animate() работает только со свойствами числовых CSS (поэтому он не работает с background-position, потому что это не одно число), поэтому естьнет стандартного способа jquery для этого.

Однако, поскольку @thirtydot указывает здесь , существует плагин, который реализует анимацию на background-position: http://www.protofunc.com/scripts/jquery/backgroundPosition/

...