2

私の問題: JavaScript を使用して margin-top プロパティを変更するobjectName.style.marginTop = value;と、Chrome と Safari ではうまく機能しますが、Firefox では、配置がすべて間違っているようです。要素をビューポートの上に配置し、その後目的の位置のわずかに下になるまで下げてから少し上に移動する代わりに、Firefox は要素を最終位置の下に配置し、上に移動してから下に移動し、目的のアニメーションをほぼミラーリングします。

Javascriptを切り替えてCSSに値を入力すると、配置は問題ないので、間違いは.jsにあると思います。

コンテキスト: JavaScript を使用して単純なアニメーション ロゴを作成しようとしています。ブラウザのビューポートの外からその位置にドロップしたい。ロゴは HTML 要素です <img id="site_logo" src="logo.png" />

JavaScript コードは次のとおりです。

var logoValue = -400;

function onLoad(){  
    // ...
    logoStarter();
}

function logoStarter(){ //sets the logo in its starting position outside the viewport   
    var site_logo = document.getElementById("site_logo");
    site_logo.style.marginTop = logoValue +"px"; 
    logoAnimationDown();
}

function logoAnimationDown(){       // moves the logo down until it is somewhat underneath its final position 
    if(logoValue <= 20){    
        console.log(logoValue);
        logoValue += 17;

        var site_logo = document.getElementById("site_logo");           
        site_logo.style.marginTop = logoValue +"px";            

        setTimeout('logoAnimationDown()', 30);
        }
    else{
        setTimeout('logoAnimationUp()', 30);
        }
}   

function logoAnimationUp(){   // moves the logo up to its final position
    if(logoValue > 0){  
        console.log(logoValue);
        logoValue -= 10;

        var site_logo = document.getElementById("site_logo");           
        site_logo.style.marginTop = logoValue + "px";

        setTimeout('logoAnimationUp()', 30);
        }
}
4

1 に答える 1

1

FFは手順を2回行うようです。setTimeout次のように s を宣言します。

setTimeout(logoAnimationDown, 30);
setTimeout(logoAnimationUp, 30);

この種の引用符で囲まれた文字列setTimeout('doFunction()',30)を使用してターゲット関数を割り当てる場合、FF はこれを行います: eval('doFunction()')、関数をすぐに実行し ("()" のため)、遅延時間後に再度実行します。

于 2012-04-16T08:40:54.880 に答える