So I have a div and I added a background image via CSS. I

Question

0

Asked: May 27, 20262026-05-27T02:08:07+00:00 2026-05-27T02:08:07+00:00

So I have a div and I added a background image via CSS. I

0

So I have a div and I added a background image via CSS. I want the image to animate to a different position on hover with jQuery.

I have everything working except for the animation is not firing. To simplify the code, I created an example of my scenario here.

Here is the HTML:

<div class="moveMe"></div>

The CSS:

div.moveMe {
    margin: 20px auto;
    width: 100px;
    height: 200px;
    border-radius: 7px;
    box-shadow: #000 0 0 6px;
    cursor: pointer;
    background: url('http://placekitten.com/200/300')no-repeat 0px 0px;
}

And the problem, the jQuery:

 $('.moveMe')
    .css( {backgroundPosition: "0% 0%"} )
    .hover(
        function() {
            $(this).stop().animate({backgroundPosition: "100% 0%"}, "600");
        },
        function() {
            $(this).stop().animate({backgroundPosition: "0% 0%"}, "600");
        });

just so you know:

jQuery is loaded
The jQuery code is inside of the document load function

I tried changing the animate properties to change the width on hover in out and it worked so I think my problem is with the backgroundPosition syntax or something.

This is driving me crazy, any help would be great.