我的问题:
通过JavaScriptobjectName.style.marginTop = value;
更改margin top属性在Chrome和Safari中很有效,但是在Firefox中,定位似乎完全错误。Firefox没有将元素放在视窗上,而是将其放低至略低于所需位置,然后再向上移动一点,而是将其放在最终位置的下方,上下移动,几乎与所需动画完全相同。
如果我切换Javascript并在CSS中输入值,定位就可以了,所以我猜错误在于.js。
上下文:
我试图通过JavaScript创建一个简单的动画徽标。我想让它从浏览器视窗外掉到它的位置。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);
}
}
最佳答案
看来FF做了两次手术。声明您的setTimeout
如下:
setTimeout(logoAnimationDown, 30);
setTimeout(logoAnimationUp, 30);
如果使用这种带引号的字符串
setTimeout('doFunction()',30)
来分配目标函数,FF会执行以下操作:eval('doFunction()')
,并立即执行该函数(因为“,”),然后在延迟时间之后再次执行。