1

重複の可能性:
jquery.animate background-position が機能しない

背景の位置をアニメーション化する小さなスクリプトがありますが、残念ながら FireFox では機能しません。
IE と Chrome で動作します。 

$('#background').animate({
     'background-position-x': -1020
});

FireFox で動作しないのはなぜですか?
前もって感謝します！

4

5 に答える 5

5

いつでも独自の小さなプラグインを作成できます。それほど難しいことではありません。

jQuery 1.8 を使用して $.Animation メソッドにアクセスできるようになりました。これにより、多くの作業を行わずにアニメーション化された値が直接得られるため、次のようなことができます。

$.fn.animateBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = parseInt(pos[0]) || 0;
    this.y = parseInt(pos[1]) || 0;
    $.Animation( this, {
        x: x,
        y: y
      }, { 
        duration: speed
      }).progress(function(e) {
          this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    });
    return this;
}

そして、それを使用するために、次のことができます。

$("#background").animateBG(x-value, y-value, speed);​

実際の例: $("#background").animateBG("0px", "-45px", 300);</p>

フィドル

免責事項: これは完成してテスト済みのプラグインではありませんが、jsFiddle で 10 分かけて作成したものですが、テストして必要な変更を加えれば、問題なく動作するはずです。

于 2012-08-28T14:28:59.843 に答える
1

引用https://stackoverflow.com/a/8378817/168735

background-position-x は非標準の CSS プロパティであり、Firefox ではサポートされていません。

見る：

http://snook.ca/archives/html_and_css/background-position-xy https://stackoverflow.com/a/8175460/1011582

于 2012-08-28T13:58:08.277 に答える
1

先に指摘したように、background-position-x非background-position-y標準です。

調べることができるオプションは 2 つあります。

  1. jQuery バックグラウンド アニメーション プラグイン (例: http://snook.ca/archives/javascript/jquery-bg-image-animations/ )
  2. CSS3 トランジション
于 2012-08-28T14:08:32.360 に答える
0

http://my.safaribooksonline.com/0130092789/ch14lev1sec7?portal=oreillyで読めるように、これは Internet Explorer の CSS 固有のプロパティです。

于 2012-08-28T13:57:50.447 に答える
0

background-position-xFirefox はorをサポートしていませんbackground-position-y。現在の x と y の位置、目的の位置、およびそれを使用して計算し、アニメーション化する単純な関数を作成する必要がありsetTimeoutます$(el).css。または、CSS3 アニメーションを使用します。

PS 申し訳ありませんが、私の前の投稿です。

于 2012-08-28T13:58:49.213 に答える