jQuery 1.6: backgroundPosition vs backgroundPositionX и совместимость с FF4

Question

В попытке обновить плагин jQuery iCheckbox (http://stackoverflow.com/questions/6032538/) для работы над jQuery 1.4.4 Я узнал, что использование из

animate({backgroundPosition:'10px 0px'}) 

необходимо изменить, чтобы

animate({backgroundPositionX: '10px', backgroundPositionY: '0px'}) 

, как только свойства с одним параметром следует использовать. До сих пор это имеет смысл, но подождите .. пока он отлично работает в Safari и Chrome, он не работает в FF4 (все на Mac).

Так что я пробовал это, и вот, наконец, выяснилось, что если я изменюсь до

animate({backgroundPosition: '10px'}) 

Это работает везде! Но что здесь происходит? Теперь, когда я просто даю один параметр, он работает, но я не указываю, является ли он для оси X или Y (поэтому по умолчанию для оси X это кажется .. но что, если я хочу, чтобы он работал на оси Y?)

Это кажется странным, и мои решения здесь не могут быть правильным способом. Поэтому мне нужен совет:

Что происходит?

Как следует позиционировать положение фона, используя jQuery 1.4 - 1.6, чтобы он работал в браузерах?

Answer 1

Во-первых http://www.w3schools.com/css/pr_background-position.asp

, JQuery не может анимировать два значения в в то же время, таким образом, вы видели, что ввод двух значений для backgroundPosition вообще не работал. Также обратите внимание, что для значений pxJQuery documentation рекомендует вам не написать px.

Во-вторых, backgroundPositionX и backgroundPositionYявляются нестандартные свойства CSS поддерживаются только в нескольких браузерах, в первую очередь IE и недавно Webkit, поэтому вы обнаружите, что не работает в FF или Opera. (See here.) .

Я обнаружил, что смешивание JQuery's animate и CSS-переходов работает для анимации фонового изображения на одной оси в большинстве браузеров. Я процитирую из моего ответа на другой вопрос (jQuery.animate background-position):

Использование JQuery-х .animate() и backgroundPositionX и Y отдельно для IE (это будет работать с последними JQuery). Затем в браузерах support CSS transitions (почти все, кроме IE), используйте .css() вместо .animate(), чтобы изменить положение фона и установить переход CSS в таблицу стилей.

Вы будете охватывать большинство браузеров вышеуказанным, но это может быть не AS , совместимое с использованием только плагина.Смотрите на работе здесь: http://jsfiddle.net/lucylou/dVpjh/

Answer 2

По: «% и позиции Если указать только одно значение, другое значение будет 50% Вы можете смешать»