Как исчезнуть в фоновое изменение положения для фонового изображения в jquery?

Question

Я использую гигантский спрайт для элемента, который изменяет различные состояния при наведении курсора.Мне было интересно, есть ли способ заставить изображение состояния наведения исчезать?Вы можете просмотреть мой код в режиме реального времени - здесь

Вот мой код состояния наведения для каждого диапазона

$(".hf-1").hover(
        function () {
                $(this).css("background-position","0 -121px");
                $(".hf-2").css("background-position","0 -242px");
                $(".hf-3").css("background-position","0 -363px");
                $(".hf-4").css("background-position","0 -484px");
              },
        function () {}

);

Я используюJquery, чтобы сделать всплывающее окно фонового изображения вместо базового CSS, потому что у меня есть несколько всплывающих окон, которые должны быть сброшены.

Спасибо за любую помощь.

Answer 1

Используйте что-то вроде этого:

$(this).animate({"background-position": "0 -121px"}, "slow");

Сполосните и повторите для остальных трех.

Answer 2

Или вы можете просто использовать встроенный в jquery API fadeIn.

 $(this).click(function () {
            $("this").fadeIn("slow");
          });

Answer 3

Вам нужно будет сложить фоны вдвое и перейти от одного к другому. Не сможет исчезнуть в том же контейнере.