анимация фонового изображения не работает в Firefox

Question

Я использую следующий скрипт для анимации спрайта для background-image для nav div:

$("li#test2").hover(
      function () {
        $(this).animate({
          'background-position-y': '-40'
        }, 500);
      },
      function () {
        $(this).animate({
          'background-position-y': '0'
        }, 500);
      }
    );

Это прекрасно работает в Safari и Chrome, но не в Firefox. Вы можете увидеть страницу, на которой он находится здесь . Просто наведите курсор мыши на первое «домашнее» изображение в навигационной панели.

Может кто-нибудь сообщить мне, почему он не работает в Firefox?

Спасибо

Ник

Answer 1

background-position-x и background-position-y не являются стандартами.

Если вы хотите анимировать, вы должны изменить оба значения (x и y) с помощью background-position.

.сайты:

http://snook.ca/archives/html_and_css/background-position-x-y

https://developer.mozilla.org/en/CSS/background-position

Answer 2

Я показываю синтаксическую ошибку в файле slider.js в строке 46. Может быть, что-то не было правильно закрыто?

Answer 3

Не похоже, что Firefox поддерживает свойство backgroundPositionY, поэтому вам нужно использовать свойство backgroundPosition, которое ожидает обе координаты.

"backgroundPositionY" in document.createElement("div").style
//true for chrome, false for firefox


"backgroundPosition" in document.createElement("div").style
//true for both

Поскольку jQuery не будет поддерживать это из коробки, вам нужно использовать подключаемый модуль типа this