web-dev-qa-db-ja.com

jqueryは背景の位置をアニメーション化します

これが機能していないようです。

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

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

jqueryjquery-animatebackground-position
58
jimbo

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

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

私はそれが単一の値を期待しているからかもしれないと思う？

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

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

アニメーション化されたプロパティはすべて、以下に記載されている場合を除き、単一の数値にアニメーション化される必要があります。数値以外のほとんどのプロパティは、基本的なjQuery機能を使用してアニメーション化できません。 （たとえば、幅、高さ、または左はアニメーション化できますが、背景色はアニメーション化できません。）特に指定がない限り、プロパティ値はピクセル数として扱われます。単位emおよび％は、該当する場合に指定できます。

40
Luke Duddridge

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 +を含むこれまでにテストされたすべてのブラウザーで機能しました。

ちょっと前に demo をオンラインにしましたが、さらにガイダンスが必要な場合は、それを分解することができます。

35
bfncs

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

たとえば、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);
    }
});

Step関数内のthis。を忘れないようにしてください。

9
eelkedev

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

backgroundPosition: '-20px 0px',

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

更新：今行った限られたテストでは、純粋な数値（「px」なし）を入力すると、.animate（）メソッドのbackgroundPositionで機能します。言い換えれば、これは動作します：

backgroundPosition: '-20 0'

ただし、次のことはできません。

backgroundPosition: '-20px 0'

お役に立てれば。

5
Jonathan Head

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

$(this).animate( {backgroundPositionX: "-=20px"} ,500);
3
user2030631

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

解決するには、 Background Position Plugin を含めるだけで、背景を自由にアニメーション化できます。

3
BlackDivine

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

2
mag

backgroundPosition:"(-20px 0)"を試してください

再確認するには、これを バックグラウンド位置 プラグインを参照していますか？

jsfiddle でのバックグラウンド位置プラグインの例。

2
Mark Coleman

Div My_div 250px x 250px、背景画像も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);
});

私はそれが役立つことを願っています

0
fausto