javascript - 如何使用JQuery控制CSS Sprite

这没有像我期望的那样进行动画处理，为什么不进行动画处理？

的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'
        });
    });
});

最佳答案

如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/