1

背景アニメーションのサンプルをウェブで検索しました。私はこのURLを見つけました:

http://jsfiddle.net/rwaldron/TzWQA/

Safari と Chrome では動作しますが、アニメーションの背景は Opera と Firefox では動作しません。これをブラウザ間で機能させるための回避策はありますか?

含まれているコードは次のとおりです。

$(document).ready(function(){
 $("#puppies")
    .animate({
        backgroundPositionY: "0px",
        backgroundPositionX: "-250px"
    }, 2000);
});
4

2 に答える 2

1

コードが失敗する理由に関する @AlphaMale の説明は正確です。次の構文を使用して、これをクロスブラウザーで機能させる便利なスニペットを使用します。

$(document).ready(function(){
  $("#puppies")
    .animate({
        backgroundPosition : "(0 -250px)"
    }, 2000);
});

ACTIONでそれを見てください！ http://jsfiddle.net/dUmNN/1/

于 2012-05-24T05:55:34.070 に答える
1

backgroundPositionYとbackgroundPositionXは FF ではサポートされていません。したがって、背景をアニメーション化する場合は、X、Y値をまとめてbackground-positionに渡す必要があります。

同じ問題に関する議論は次のとおりです。

背景画像のアニメーションが Firefox で機能しない

以下も参照してください。

http://www.protofunc.com/scripts/jquery/backgroundPosition/

http://snook.ca/archives/javascript/jquery-bg-image-animations/

お役に立てれば。

于 2012-05-24T05:56:12.343 に答える