jQuery関数をカスタムアニメーション化します。ステップの「今」変数をリセットする方法は？

Question

要素の背景位置プロパティをjQueryでアニメーション化する必要があります。このチュートリアルでは、デフォルトのjQueryアニメーション機能を使用することで、私は運がなかった。

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

My機能のようなものだった：私はそれとは運がなかったので、私は要素の垂直背景の位置を変更し、私自身の機能を、コーディングしようとした

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

。ここでは、変数今（バックグラウンド位置Y）その内部

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

お知らせ：

$.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); 
}; 

が、私はこのような関数を呼び出して、-900に要素のYの背景位置をアニメーション化するには：それは次のようになりますステップ：は0から-900まで減少します。

これはうまくいきますが、ここで問題になります。私は私のバックグラウンドの位置をresetedとして、

この場合、

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

：この後、私は直接のjQueryの.css（）関数を使用して「0PXの0PX」にこのような背景の位置をリセットし、次に同じよう再びそれをアニメーション化する必要があります"0px 0px"の場合、パラメータはは0から300になるはずですが、-900から300になります。ここで-900は最初に設定した値です。

誰かが間違っていることを知っていますか、またはこのパラメータをリセットして毎回正しい値を取得する方法を教えてください。

CSS3のプロパティtransform - rotateを変更する要素を回転させる別の関数がありますが、同じ問題があります。

ありがとうございました！

Answer 1

これは私の仕事：

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をアニメーション化しているという事実から来ています。 次に、 "pixels"値をbackgroundPositionに適用します。 その後、backgroundPositionをリセットしますが、 "pixels"の値はリセットしません。 次のアニメーションは開始値として最新のピクセル値を持ちます。 「ピクセル」の値をbackgroundPositionの値にリセットして、同期させておく必要があります。