jquery - 使用 jQuery 悬停时的动画背景位置

Question

所以我有一个 div 并通过 CSS 添加了背景图像。我希望图像在悬停时使用 jQuery 动画到不同的位置。

除了动画没有触发之外，我一切正常。为了简化代码，我创建了一个场景示例 here .

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

问题是 jQuery:

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

只是让你知道:

• jQuery 已加载
• jQuery 代码位于文档加载函数内部

我尝试更改动画属性来更改悬停时的宽度，它有效，所以我认为我的问题在于 backgroundPosition 语法或其他内容。

这让我发疯，任何帮助都会很棒。

Answer 1

检查这个:http://jsfiddle.net/9Y9Bv/3/

我刚刚切换到background-position-x