4

jqueryのアニメーションで背景画像の位置を変えたい。しかし、私のコードは機能していません。誰でもそれを短くするのを手伝ってもらえますか.

以下は私のコードです

CSS

#pnav a{
    background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif) 0 0 no-repeat;
    display:block;
    width:20px;
    height:42px;
}

Jクエリ

$('#pnav a')
.hover(function () {
    $(this).stop().animate({
        'background-position' : '(0px -42px)'
    }, 150);
}, function () {
    $(this).stop().animate({
        'background-position' : '(0 0)'
    }, 150);
});

html

<div id="pnav">
<a href="#">123</a>
</div>

これはフィドルファイルです

前もって感謝します。

4

4 に答える 4

4

jQueryアニメーションはアニメーション化できないと思いますbackground-positionが、代わりにCSSトランジションを使用できます

    #pnav a{
    background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif) 0 0 no-repeat;
    display:block;
    width:20px;
    height:42px;

    -webkit-transition: background-position 150ms ease-in-out;
    -moz-transition: background-position 150ms ease-in-out;
    -ms-transition: background-position 150ms ease-in-out;
    -o-transition: background-position 150ms ease-in-out;
    transition: background-position 150ms ease-in-out;
}

#pnav a:hover {
    background-position:0px -42px;

}

ここにフィドルがあります: http://jsfiddle.net/pavloschris/eg5zC/7/ とtransitionブラウザの互換性: http://caniuse.com/#search=transition

于 2013-02-25T08:13:48.517 に答える
2

背景画像の位置アニメーションには、「jquery.backgroundpos.js」を使用する必要があります。ここからダウンロードできますhttp://keith-wood.name/js/jquery.backgroundpos.js

$(document).ready(function(){

$('#pnav a')
.hover(function () {
   $(this).stop().animate({backgroundPosition: '0px ' + '35px'}, 500);
}, function () {
    $(this).stop().animate({backgroundPosition: '0px ' + '0px'}, 500);
});


});

これが更新されたjsFiddleファイルです

于 2013-08-13T13:05:37.963 に答える
0

animate 関数内では、background-position はそのようには機能しません。代わりにこれを使用してください

$('#pnav a')
.hover(function () {
    $(this).animate({
        'background-position-x': '10%',
        'background-position-y': '20%'
    }, 550);
}, function () {
    $(this).animate({
       'background-position-x': '0%',
       'background-position-y': '0%'
    }, 550);
});

:参照

ただし、「xpy」が指摘したように、必要なことはCSS3.0で実現できますが、IEでは実行されません

アップデート：

以下は作業サンプルです:

<html>
    <head>
        <script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script>
         $(document).ready(function(){
          $('#pnav a')
                    .hover(function () {
                        $(this).animate({
                            'background-position-x': '10%',
                            'background-position-y': '20%'
                        }, 550);
                    }, function () {
                        $(this).animate({
                           'background-position-x': '0%',
                           'background-position-y': '0%'
                        }, 550);
                    });
            });
        </script>
       <style>
            #pnav a{
                background:url(http://www.standard-icons.com/stock-icons/standard-road/scooter-icon.gif) 0 0 no-repeat;
                display:block;
                width:20px;
                height:42px;
            }
       </style>

    </head>
    <body>
            <div id="pnav">
              <a href="#">123</a>
           </div>
    </body>
</html>

フィドル

于 2013-02-25T08:18:28.663 に答える
0

あなたの行をこれに置き換えてください、

background:url('http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif') no-repeat ;

CSS で URL に逆コンマを追加する

于 2013-02-25T08:06:20.607 に答える