JQuery 1.6: backgroundPosition и 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

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

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

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

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

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

Answer 2

Согласно: http://www.w3schools.com/css/pr_background-position.asp

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