0

誰かがここで問題を見ますか? 動いていない。 

$('#div1').hover(
                function () {                       
                    $('#div2').stop().animate({ backgroundPosition : '(0 -60px)' }, 500);                       
                    $('#div3').stop().animate({ marginRight : '-=10px;' }, 500);
                },
                function () {                   
                    $('#div2').stop().animate({ backgroundPosition : '(0 0)'}, 500);                        
                    $('#div3').stop().animate({ marginRight : '+=10px;'}, 500);
                });
4

2 に答える 2

0

JSFiddle

右マージンの幅にセミコロンがあり、背景の位置に括弧がありました。

また、フィドルで jQuery をロードしませんでした。

$('#div1').hover(
    function () {                       
        $('#div2').stop().animate({ 'background-position-x' : '0px', 'background-position-y': '-60px' }, 500);                        
        $('#div3').stop().animate({ 'margin-right' : '-=10px' }, 500);
     },
    function () {
        $('#div2').stop().animate({ 'background-position-x' : '0px', 'background-position-y': '0px'}, 500);                        
        $('#div3').stop().animate({ 'margin-right' : '+=10px'}, 500);
});

また、css 定義を文字列化しましたが、それ以外の場合は正しく機能しない場合があるため、念のため常に文字列を使用しています。

この質問に従って、x 値と y 値を分離しました。

于 2013-03-04T22:50:30.870 に答える
0

これ：

$('#div2').stop().animate({ backgroundPosition : '(0 -60px)' }, 500);

無効です！

jQuery は を理解'(0 -60px)'できないので、何も起こらず、両方の値をアニメートすることはできません。animate は一度に 1 つの値しか受け付けないためです。記憶が正しければ、Y 軸ではなく X 軸になります。step()そのためには、次のメソッドを使用する必要があります。

編集：

この回答には、実際には背景アニメーションの問題に対する解決策があります。それはクロスブラウザーです:

Y軸のJQueryアニメーション背景画像

于 2013-03-04T22:52:51.467 に答える