How To Fade In A background-position change for a background image in jquery?

Question

I am using a giant sprite for an element that changes different states at hover. I was wondering if there was a way to have the hover state image fade in? You can view my code live - here

Here's my code for the hover state for each span

$(".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 () {}

);

I am using Jquery to do the background image hover instead of basic css cause i have multiple hovers that need to be reset.

Thanks for any help.

Answer 1

Use something like this:

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

Rinse and repeat for the other three.

Answer 2

You would need to double-stack the backgrounds and fade from to the other. Won't be able to fade within the same container.

Answer 3

Or you can just use jquery's native fadeIn API.

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