5

これを機能させることができないようです：

$("#animation").animate({backgroundPosition:"-100px 10px"});

私はこれを試してみましたが、FFoxでは機能しません:

$('#animation').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

分割:

<div id="animation" style="border: 0px solid rgb(153, 153, 153); margin: auto; width:550%;height: 100%;background-size:100% 100%; overflow:hidden; padding: 0px; background-image: url(images/pano.png); background-attachment: scroll; box-shadow: rgb(0, 0, 0) 0px 0px 40px inset; background-position: 180px 0px; background-repeat: no-repeat;display: none;"></div>

JsFiddle: http://jsfiddle.net/sorfect/34psJ/1/ JQuery 1.8 を使用しています。何か案は？

4

4 に答える 4

10

さて、位置をアニメーション化したいだけなら、jQueryではアニメーション化が機能しないのでx幸運です。だから使用するために：ybackground-positionx

'background-position': '10%'

ただし、一連のフレームをアニメーション化するために位置をインクリメントする場合は、次のようにインクリメントする必要があります。

'background-position': '+=10%'

stop / goコントロールを使用した実際の例については、私のjsFiddleを参照してください。

于 2013-03-05T12:36:37.883 に答える
3

これは、Firefoxで機能しない理由についても、あなたとこれに役立つと思います。私はあなたのコードをいじっていました。次のコード ブロックは、コードと同じように動作しています。

これは同じように動作します

$(document).ready(function() {
  $('#animation').animate({'background-position': '10%'}, 10000, 'linear');
});

に

$('#animation').animate({
 'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

そして、このコード ブロックは Firefox でも機能します。

 $(document).ready(function() {
    $('#animation').animate({'background-position': '10%'}, 10000, 'linear');
 });

詳細については、上記のリンクを確認してください。それらはあなたを助けます。

于 2013-03-05T11:08:29.063 に答える
1

Keith Wood のjQuery Background Position Animation プラグインを試してみませんか? 数年前、プロジェクトに遅れて参加し、バックグラウンドアニメーションのソリューションが必要になり、コードがクロスブラウザーで失敗した理由を調査する時間がなかったときに、最終的にそれを使用しました (迅速で汚い - 締め切りが迫っていた)大きい!) そして、正直に言うと、これは私が何度も戻ってくる数少ないプラグインの 1 つです。

リンクされたページに例があるので、わざわざ繰り返すつもりはありませんが、Wood 氏のプラグインは私を失敗させたことがないので、敬意を表します。

于 2014-03-29T13:01:39.600 に答える