如何使用jQuery为背景图像制作动画

Question

嗨,我正在尝试使用jQuery为背景图像设置动画,我尝试在这里使用本教程,但是我的测试页面没有运气,我看到了蓝色的Facebook图标,但鼠标悬停在它上面并没有动画向上显示灰色的标志.请帮忙!谢谢,我是一个jQuery noob.

我的测试页面: http ://leongaban.com/_stack/bg_animation/

Facebook图标应向上动画,完整图片如下:

我的CSS

<style>
    #facebook_icon li {
        padding: 0;
        width: 120px;
        height: 119px;
        list-style: none;
        background: red;
        background:url('img/fb_120x238.png') repeat 0 0;
    }
</style>

HTML

<ul id="facebook_icon">
    <li><a href="#"><div class="box"></div></a></li>
</ul>

使用Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>

<script>

    (function() {
        $('#facebook_icon li')
            .css( {backgroundPosition: "0 0"} )
            .mouseover(function(){
                $(this).stop().animate(
                    {backgroundPosition:"(0 -119px)"},
                    {duration:500})
                })
            .mouseout(function(){
                $(this).stop().animate(
                    {backgroundPosition:"(0 0)"}, 
                    {duration:500})
                })
    })();

</script>

更新:工作CSS 3解决方案

CSS 3

#facebook_icon li {
        padding: 0;
        width: 120px;
        height: 119px;
        list-style: none;
        background: red;
        background:url('img/fb_120x238.png') repeat 0 0;

        -moz-transition: background-position 1s;
        -webkit-transition: background-position 1s;
        -o-transition: background-position 1s;
        transition: background-position 1s;
        background-position: 0 0;
    }

    #facebook_icon li:hover{
        background-position: 0 -119px;
    }

    .box {
        width: 120px;
        height: 119px;
    }

HTML(添加空div框以点击某些内容)

<ul id="facebook_icon">
    <li><a href="#"><div class="box"></div></a></li>
</ul>

Answer 1

一个简单的解决方案应该是使用css3过渡.你可以这样做:

在你的CSS中

#facebook_icon li{
    -moz-transition: background-position 1s;
    -webkit-transition: background-position 1s;
    -o-transition: background-position 1s;
    transition: background-position 1s;
    background-position: 0 0;
}

#facebook_icon li:hover{
     background-position: 0 -119px;
}