Background animate on hover

by ataylor

HTML

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

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;}

JavaScript

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