javascript - 通过 JavaScript 更改 marginTop-property 会导致 FireFox 中的错误结果

Question

我的问题:通过 JavaScript 更改 margin-top 属性 objectName.style.marginTop = value;在 Chrome 和 Safari 中运行良好，但是在 Firefox 中，定位似乎完全错误。 Firefox 不是将元素放置在视口(viewport)上方，然后将其降低到略低于所需位置，然后将其向上移动一点，而是将其放置在最终位置下方，然后向上然后向下移动，几乎可以镜像所需的动画。

如果我切换到 Javascript 并在 CSS 中输入值，定位没问题，所以我猜错误出在 .js 上。

上下文:我正在尝试通过 JavaScript 创建一个简单的动画 Logo 。我希望它从浏览器视口(viewport)外掉落到它的位置。 Logo 是 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);
        }
}   

Answer 1

好像FF做了两次这个过程。像这样声明您的 setTimeout:

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

如果你使用这种带引号的字符串 setTimeout('doFunction()',30) 来分配目标函数，FF 会这样做:eval('doFunction()') ，并立即执行函数(因为“()”)，然后在延迟时间后再次执行。