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

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

1 个答案: