2

jQueryを使用して要素のbackground-positionプロパティをアニメーション化する必要があります。デフォルトのjQueryアニメーション関数を使用するこのチュートリアルに従うと、運が悪かった。

http://snook.ca/archives/javascript/jquery-bg-image-animations

私の機能は次のようなものでした：

$('#content').css( {backgroundPosition: "0 0"} )
             .animate(
                 {backgroundPosition:"(0 -900px)"}, 
                 {duration:500}
             );

運が悪かったので、要素の垂直方向の背景位置を変更する独自の関数をコーディングしようとしました。次のようになります。

$.fn.moveBackgroundY = function( pixels, duration, easing ) {

    return this.animate(
                { pixels: pixels },
                {
                    step: function(now,fx) {

                        console.log("Background Y position - " + now);

                        $(this).css({
                            backgroundPosition: '0px ' + now + 'px',
                        });
                    },
                    duration: duration,
                    complete: function() {
                        $(this).css({
                            backgroundPosition: '0px 0px',
                        });
                    }
                }, easing);
};

要素のY背景位置を-900にアニメーション化するには、次のような関数を呼び出します。

$('#content').moveBackgroundY(-900, 2100, 'easeInOutCubic');

ここで、 step：内の変数（バックグラウンド位置Y）が0から-900に減少することに注意してください。

それはうまくいきますが、ここに私の問題があります。この後、jQuery .css（）関数を使用してこの背景位置を直接「0px0px」にリセットし、次のように再度アニメーション化する必要があります。

$('#content').moveBackgroundY(300, 2100, 'easeInOutCubic');

この場合、背景位置を「0px 0px」にリセットすると、パラメーターは0から300になりますが、-900から300になります。ここで、-900は、関数を呼び出して最初に設定した値です。

誰もが何が悪いのか知っていますか、それとも毎回正しい値を取るようにこのパラメータをリセットするにはどうすればよいですか？

CSS3プロパティの変換を変更して要素を回転させるそのような別の関数があります-rotate、そして私は同じ問題を抱えています。

ご協力いただきありがとうございます！

4

1 に答える 1

3

これは私のために働いた： 

return this.animate(
            { pixels: pixels },
            {
                step: function(now,fx) {
                    var calculatedPixels = this.pixels;
                    console.log("Background Y position - " + now);


                    $(this).css({
                        backgroundPosition: '0px ' + calculatedPixels + 'px',
                    });
                },
                duration: duration,
                complete: function() {
                    $(this).css({
                        backgroundPosition: '0px 0px',
                    });
                    //not so sure about this but you have to do this somehow
                    this.pixels = 0;
                }
            }, easing);

位置リセットの問題は、backgroundPosition ではなく「ピクセル」値をアニメートしていることが原因です。次に、「ピクセル」値を backgroundPosition に適用しています。次に、backgroundPosition をリセットしますが、「ピクセル」値はリセットしません。次のアニメーションは、開始値として最新のピクセル値を持ちます。「ピクセル」値を何らかの方法で backgroundPosition 値にリセットして、それらを同期させる方法を見つける必要があります。

于 2012-02-03T14:40:16.923 に答える