8

背景画像の y 位置のみをアニメーション化しようとしています。

コードは、Firefox 以外のすべてのブラウザーでうまく機能します。以前の議論で、FF には問題があることに気付きましたがbackground-position-y、この特定のケースのためだけにプラグインを含めたくありません。

$(".module").animate({
    "height": 160,
    "background-position-y": cropsize //variable for needed position
}, "slow");

この質問で答えたように: jQuery background animate にまだ問題があります - Safari と IE で動作しますが、他には何もありません! プレーン プロパティを使用できるはずですがbackground-position、そうすると、他のブラウザーでアニメーションが壊れるだけです。

$(".module").animate({
    "height": 160,
    "background-position": "0 "+cropsize+"px"
}, "slow");

おそらく、私が見逃しているのは単なる構文エラーですが、FF（最新バージョン）でこれを機能させることができないようです

4

8 に答える 8

17

background-position-x/y実際には CSS 仕様の一部ではなく、その IE 固有の CSS であり、IE5.5 に追加され、後に Webkit によって実装されます。

Opera と Firefox はそれを受け入れません。

最善の解決策は、stepメソッドを使用することです。これにより、ほぼすべてをアニメーション化できます。

ルカの答えに少し追加するには、メソッドが正しいとしても多少間違っています。メソッドを使用する最も簡単なstep方法は、任意の値をアニメーション化し、それにステップをフックすることです。

$('elem').animate({
  'border-spacing': -1000
},
{
  step: function(now, fx) {
    $(fx.elem).css("background-position", "0px "+now+"px");
  },
  duration: 5000
});

のような jQuery メソッドを受け入れるには、要素を jQuery スタイルでラップする必要がありますcss()。を使用しましborder-spacingたが、サイトに影響を与えない任意の css プロパティが機能します。使用する css プロパティの初期値を CSS に設定することを忘れないでください。

fx.start と fx.end の値を設定すれば、このstepメソッドを単独で使用することもできます。Luka のように使用することはnow+=1、代わりに setInterval を使用することとほとんど同じですが、アイデアはまったく同じでした。

フィドル

編集：

jQuery の新しいバージョンでは、他のオプションもあります。この回答を参照してください。

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

于 2012-05-04T13:14:58.677 に答える
3

firefox は jquery animate で background-position を認識しませんが、firefox は css3 animate を受け入れます。

コード：

  if ($.browser.mozilla) {      
     $('.tag').css({
               'background-position': 'center 0px',
               '-moz-transition': 'all 1500ms ease'
     })
  } else {
     $('.tag').animate({
               'background-position-y': 0
     }, 1500);
  }
于 2013-03-15T22:21:33.527 に答える
2

jquery の animate は、両方ではなく、1 つの背景プロパティのみを取得するようです。パーセンテージまたはピクセルのいずれかを使用できます。どちらも問題ありません。しかし、私が知る限り、x または y 座標のみを指定する方法はありません。誰かがそれについて私が間違っていることを証明できることを願っていますが、それがこのフィドルが示しているようです:

http://jsfiddle.net/JMC_Creative/dPjSz/

また、css に入力した background-position の値に関係なく、jquery アニメーションは常に "0 50%" から始まるように見えます。うーん...

于 2012-05-04T13:33:48.087 に答える
1

ステップ パラメータを使用します。

  $("item").animate({
           opacity:1,
       }, 
      step: function(now, fx){ 
          $(fx.elem).css("background-position","0px "+now+"px");
          now+=1;
      }
});

jQuery ドキュメントから: http://api.jquery.com/animate/#step

于 2012-05-04T13:23:21.180 に答える
0 
var x = 0; var y = 0;
window.setInterval(function() {
    $(".layer").css("background-position", x + "px " + y + "px");
    x++; y--;
}, 50);
于 2015-08-04T19:53:16.897 に答える
-1

background-positionアニメーションは jQuery 1.5.2 以下でのみ動作します

于 2012-05-04T13:19:38.427 に答える
-1

jQueryでは、アニメーション化するbackground-position-xか、y次のようにすることができます：

$(selector).animate({ 
                       backgroundPositionY: amountToAnimate 
                    }, duration);

-JavaScript では、文字は文字列以外の予約演算子であるという考えです。jQuery はキャメルケースを使用してこれを回避します。

于 2012-05-04T14:15:43.220 に答える