アニメーションを開始する前にアニメーションプロパティを更新します。

Question

jquery animateを使用して、次のアニメーションを要素で実行しています。アニメーションが開始される前に距離値が変更されるので、アニメーションプロパティの値を更新します。これどうやってするの？図のようにstartコールバック関数を使用しましたが、アニメーションを更新しません。

el.delay(delay).animate({ 
    top: -distance 
},{ 
    duration:700, 
    start:function(e){ 
     e.props.top = -($(e.elem).offset().top - $(".navigation").offset().top); 
} 
}) 

Answer 1

私は、アニメーションのロパティをその場で更新する方法についての回答を見つけることができました。 startは、アニメーションが開始されたときに起動されるが、propsオブジェクトに対して行われた変更がアニメーションに反映されないコールバックです。このため、stepコールバックが理想的です。そして、各アニメーションステップでfxオブジェクトを変更しましょう。以下は、私が考え出した解決策です。

el.delay(delay).animate({ 
    top: -distance + 'px' 
},{ 
    duration:700, 
    step:function(now,fx){ 
     if(now == 0){ 
      fx.end = -($(fx.elem).offset().top - $(".navigation").offset().top); 
     } 
    } 
}) 

最初のステップが実行されたときにprop値が変更された後、残りのステップは無視されます。私を助けてくれた皆さん、ありがとう！ :)