Question

我的问题： 通过JavaScript objectName.style.marginTop = value;更改margin-top属性在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);
        }
}

Answer 1

似乎FF完成了两次手术。声明你的setTimeout是这样的：

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

如果使用这种带引号的字符串setTimeout('doFunction()',30)来分配目标函数，FF会执行以下操作：eval('doFunction()')，并立即执行该函数（因为“（）”），然后再次执行在延迟时间之后。

通过JavaScript更改marginTop属性会导致FireFox出错

1 个答案: