如何使用jQuery動畫背景圖像

Question

嗨，我正在嘗試使用jQuery設置背景圖片的動畫，我在這里嘗試了本教程 ，但是我的測試頁運氣不佳，我看到了藍色的Facebook圖標，但是當鼠標懸停在上方時，它沒有向上動畫以顯示灰色徽標。 請幫忙！ 謝謝，我是jQuery菜鳥。

我的測試頁： 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>

Java腳本

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

Answer 2

幸運的是，這很簡單。 您在錨點上設置background-position動畫，但實際圖像在li上。

只需在JavaScript中更改選擇器即可：

 $('#facebook_icon li')

但是，我建議更改您的標記（和隨附的CSS），使a位於li內部而不是ul的子內部。 這樣，您的標記才有效。

更新：

嘿，所以我完全同意使用CSS3。 這正是我將如何實施。 但是，為了解決這個問題：若要使bgpos插件與jQuery 1.8.2一起使用，請將backgroundPosition方法的前兩行更改為：

 if (fx.start === 0 && typeof fx.end == 'string') {
    var start = $.css(fx.elem,'backgroundPosition');