1

こんにちは私は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>

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>

更新：動作中のCSS3ソリューション

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>
4

2 に答える 2

5

簡単な解決策は、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;
}
于 2012-11-28T15:30:03.093 に答える
3

これはありがたいことにかなり単純です。アンカーでアニメートbackground-positionしていますが、実際の画像はliにあります。

JavaScriptでセレクターを変更するだけです。

 $('#facebook_icon li')

ただし、マークアップ（および付随するCSS）を変更して、がの子ではなくa内部になるようにすることをお勧めします。そうすれば、マークアップは有効です。liul

アップデート：

ねえ、私はCSS3の使用に完全に同意します。それはまさに私がそれを実装する方法です。しかし、質問を締めくくるには、bgposプラグインをjQuery 1.8.2で動作させるために、backgroundPositionメソッドの最初の2行を次のように変更します。

 if (fx.start === 0 && typeof fx.end == 'string') {
    var start = $.css(fx.elem,'backgroundPosition');
于 2012-11-28T15:27:35.860 に答える