[jQuery] backgroundPosition animation only works horizontal?

I have a background sprite that I want to animate vertical on hover,
but it "pops" in vertically...but if I change it to horizontal it all
works fine...is there something Im doing wrong?

WORKS
    $(".I1").hover(function () {
                      $(this).animate({backgroundPosition: '0px -10px'}, 500 );
                    }, function() {
                      $(this).animate({backgroundPosition: '-10px -10px'}, 500 
);
                });


FAILS (well, pops, not smooth transition)
    $(".I1").hover(function () {
                      $(this).animate({backgroundPosition: '-10px 0px'}, 500 );
                    }, function() {
                      $(this).animate({backgroundPosition: '-10px -10px'}, 500 
);
                });