59

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

$('#product_family_options_dd').animate({
  height: '300px',
  width: '900px',
  backgroundPosition: '-20px 0px',          
},

高さと幅はアニメーション化されますが、背景はアニメーション化されません。

4

12 に答える 12

96

次のように個別の値を使用するだけの場合は、背景アニメーション プラグインを使用する必要はありません。

$('.pop').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');
于 2011-10-08T00:28:43.643 に答える
40

単一の値を期待しているためだと思いますか？

jQuery のアニメーションページから取得:

アニメーションのプロパティと値

以下に示す場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。非数値のほとんどのプロパティは、基本的な jQuery 機能を使用してアニメーション化することはできません。(たとえば、width、height、または left はアニメーション化できますが、background-color はアニメーション化できません。) 特に指定がない限り、プロパティ値はピクセル数として扱われます。必要に応じて、単位 em および % を指定できます。

于 2011-03-02T17:29:06.873 に答える
35

jQuery はそのままではこれをサポートしていないため、これまでに見つけた最善の解決策は、jQuery で独自のCSS フックを定義することです。基本的に、これは jQuery.animate() でも機能する CSS 値を取得および設定するカスタム メソッドを定義することを意味します。

github には、このための非常に便利な実装が既にあります: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

このプラグインを配置すると、次のようなことができます。

$('#demo1').hover(
  function() {
    $(this).stop().animate({
      backgroundPositionX: '100%',
      backgroundPositionY: '100%'
    });
  },
  function () {
    $(this).stop().animate({
      backgroundPositionX: '105%',
      backgroundPositionY: '105%'
    });
  }
);

私にとって、これはIE6+を含むこれまでにテストされたすべてのブラウザーで機能しました。

少し前に簡単なデモをオンラインで公開しましたが、さらに詳しいガイダンスが必要な場合は、それをばらばらにすることができます。

于 2013-01-08T15:46:52.687 に答える
9

jQuery の animate 関数は、DOM オブジェクトのプロパティを直接アニメーション化するためだけに使用できるわけではありません。変数をトゥイーンし、ステップ関数を使用して、トゥイーンのすべてのステップの変数を取得することもできます。

たとえば、background-position(0px 0px) から background-position(100px 500px) に background-position をアニメーション化するには、次のようにします。

$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: 100, temporary_y: 500}, {
    duration: 1000,
    step: function() {
        var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px";
        $("#your_div").css("background-position",  position);
    }
});

これだけは忘れないように。ステップ関数内。

于 2013-04-05T10:24:26.507 に答える
5

jQuery コードでは、backgroundPosition 部分の後にコンマがあります。

backgroundPosition: '-20px 0px',

ただし、変更したいさまざまなプロパティを .animate() メソッド (および同様のメソッド) でリストする場合、中括弧で囲まれた最後の引数の後にカンマを付けないでください。それが背景の位置が変更されない理由かどうかはわかりませんが、これはエラーであり、修正することをお勧めします。

更新: 私が今行った限定的なテストでは、.animate() メソッドの backgroundPosition に対して純粋な数値 (「px」なし) を入力すると機能します。言い換えれば、これは機能します：

backgroundPosition: '-20 0'

ただし、これは次のことを行いません。

backgroundPosition: '-20px 0'

お役に立てれば。

于 2011-06-19T09:55:54.297 に答える
3

数学の組み合わせ "-=" を使用して背景を移動することもできます

$(this).animate( {backgroundPositionX: "-=20px"} ,500);
于 2013-03-04T14:43:39.873 に答える
3

2 つの値が含まれるため、単純な jquery の Animate を使用してそれを行うことはできません。

それを解決するには、背景位置プラグインを含めるだけで、背景を自由にアニメーション化できます。

于 2011-07-13T15:18:19.503 に答える
2

setInterval メソッドを使用して画像の背景位置を変更できます。こちらのデモを参照してください: http://jquerydemo.com/demo/animate-background-image.aspx

于 2013-02-20T22:50:55.343 に答える
2

試すbackgroundPosition:"(-20px 0)"

再確認するために、これをバックグラウンド ポジションプラグインとして参照していますか?

バックグラウンド位置プラグインを使用したJSFiddleでの例。

于 2011-03-02T17:26:20.710 に答える
0

My_div 250px x 250px の div があり、背景画像も 250 x 250 です

CSS:

#My_div {
    background: url("..//img/your_image.jpg") no-repeat;
    background-position: 0px 250px;
}

JavaScript:

$("#My_div").mouseenter(function() {
    var x = 250;
    (function animBack() {
        timer = setTimeout(function() {
            if (x-- >= 0) {
                $('#My_div').css({'background-position': '0px '+x+'px'});;
                animBack();
            }
        }, 10);
    })();

});
$("#My_div").mouseleave(function(){
    $('#My_div').css({'background-position': '0px 250px'}); 
    clearTimeout(timer);
});

役立つことを願っています

于 2015-01-30T10:26:32.663 に答える
-1

Firefox の使用:
2 つの値の指定: 構文の組み合わせでは機能しません。上でいくつか指摘されているように。Firebug を使用すると、「'background-position' の値を解析中にエラーが発生しました。宣言が削除されました。」アニメが終わるまで。

'backgroundPosition': '17.5em' -- 1 つの値を指定: FF および CHrome OPera、SF(Safari) および IE で動作しますが、2 番目の値または y 位置 (垂直) が「中央」に設定されることに注意してください。Firebug から、要素のスタイルは次のように設定されます:
style="background-position: 17.5em center;"

于 2012-12-02T22:06:12.617 に答える
-3 
function getBackgroundPositionX(sel) {
    pos = $(sel).css('backgroundPosition').split(' ');
    return parseFloat(pos[0].substring(0, pos[0].length-2));
}

This returns [x] value. Length of number has no matter. Could be e.g. 9999 or 0.

于 2012-01-04T20:33:55.713 に答える