これを行うにはもっと良い方法があると思います。おそらく誰かが私の間違いを指摘することができます。カウントアップとカウントダウンによってbox-shadowblurcssプロパティをパルスし、開始されると関数自体を呼び出します。
何らかの理由で、最初に渡されたsetTimeout呼び出しに引数を渡すことができません。
これをもっときれいに書く方法について何かアイデアはありますか?それは機能しますが、他のcssプロパティをアニメーション化するために一般化することもできます。
var pulseBoxShadowBlurCounter = 0;
var pulseBoxShadowBlurDirection;
$(document).ready(function() { // dom binds
pulseBoxShadowBlur($('#getData-btn'),14,'#fff',100); // start the process
});
function pulseBoxShadowBlur(pulseElement,max,color,delayTime){
var cssInput = '0px 0px '+pulseBoxShadowBlurCounter+'px '+color;
$(pulseElement).css('box-shadow', cssInput);
if(pulseBoxShadowBlurCounter == max){
pulseBoxShadowBlurDirection = 1; // backwards
}
if(pulseBoxShadowBlurCounter == -5){ // negative num for pause at 0 time
pulseBoxShadowBlurDirection = 0; // forward
}
if(pulseBoxShadowBlurDirection == 0){
pulseBoxShadowBlurCounter++;
}else{
pulseBoxShadowBlurCounter--;
}
setTimeout( "pulseBoxShadowBlur($('#getData-btn'),14,'#fff',100);",delayTime ); // loop
}