Question

这不会像我预期的那样动画，为什么它没有动画？

HTML

<div id='menuI'></div>

CSS

#menuI {
    height: 100px;
    width: 100px;
    background:url('https://www.teledynedalsa.com/images/semi/STA1600_2_200w.jpg') 0px 0px;
    text-align:justify;
}

的JavaScript

$(document).ready(function(){
    $('#menuI').mouseenter(function(){
        $('#menuI').stop();
            $('#menuI').animate({
                backgroundPosition: '0px 100px'
            }); 
        });
    $('#menuI').mouseleave(function(){
        $('#menuI').stop();
        $('#menuI').animate({
            backgroundPosition: '0px 0px'
        }); 
    }); 
});

Answer 1

正如showdev所说，你需要一个jQuery插件才能实现这一目标。但是，您也可以考虑使用转换，因为它非常适合这种情况。

以下css会导致相同的

#menuI {
    height:100px;
    width:100px;
    background:url('https://www.teledynedalsa.com/images/semi/STA1600_2_200w.jpg') 0px 0px;
    transition: background linear 0.4s; //Add vendor prefixed versions
    text-align:justify;
}

#menuI:hover {
    background-position: 0px 100px;
}

示例：http://jsfiddle.net/9fCnN/

Answer 2

我认为动画“backgroundPosition”需要plugin。

我使用background-position-y属性取得了成功：

$(document).ready(function () {
    $('#menuI').mouseenter(function () {
       $(this).stop().animate({'background-position-y':'100px'});
     });
    $('#menuI').mouseleave(function () {
        $(this).stop().animate({'background-position-y':'0px'});
    });
});

http://jsfiddle.net/Ub7aN/1/

编辑：

不幸的是，这在Firefox中似乎不起作用。

见这些帖子：
JQuery Animate Background Image on Y-axis
Animate background position y in Firefox with Jquery

如何使用JQuery控制CSS sprites

2 个答案:

编辑：