3

私の状況は次のように始まりました。divの背景画像をアニメーション化したかったのですが、jqueryでは背景画像の個々の位置（background-position）を取得できないようです。だから、オブジェクトを作成してその値をアニメーション化してから、この値をcssに入れるのはどうだろうと思いましたが、まだそれを行う方法がわかりません。これが私が試したことです。

var obj={t:0};
                $("#wrapper").animate({
                    obj:100 //I tried obj.t & t as well
                },1000,'linear',function(){},function(){
                    $("#wrapper").css({
                            'background-position':obj.t+"% 0%"
                        });
                });

また、私が尋ねる必要がある別の質問は、画像が本当に大きい場合、つまり約4000x4000pxですが、それを背景画像として設定して背景位置を変更するか、div自体を移動する方が良いでしょうか？

4

3 に答える 3

5

animateメソッドのstep関数を使用する必要があります。さらに重要なのは、#wrapper要素ではなく実際のオブジェクトをアニメーション化する必要があることです。

var obj = {
    t: 0
};

$(obj).animate({ // call animate on the object
    t: 100 // specify the t property of the object to be animated
}, {
    duration: 1000,
    easing: 'linear',
    step: function(now) { // called for each animation step (now refers to the value changed)
        $("#wrapper").css({
            'background-position': now + "% 0%"
        });
    }
});

http://jsfiddle.net/gaby/yPq8s/1/でのデモ

于 2012-04-22T10:06:55.723 に答える
0

.css()次の方法で、背景画像の背景位置を取得できます。

$('#el').css('background-position');

背景画像をアニメーション化する単純なJSフィドルを作成しました。

http://jsfiddle.net/yPq8s/

于 2012-04-22T09:55:02.923 に答える
0

背景画像用に別のdivを作成し、コンテンツがある場合は、そのdivのコンテンツをz-indexが高い別のdivに配置し、background-positionをアニメーション化する代わりに（背景画像を使用して）div自体をアニメーション化する方法？

あなたの2番目の質問に対する答えは、あなたが達成しようとしていることに関連していると思います。bg画像を含むdivを独自のz-indexに割り当てることを選択した場合でも、背景画像のbackground-positionではなく、divの位置自体で遊ぶ価値があると思います。

于 2012-04-22T10:03:27.647 に答える