Issue at Hand: I am facing a challenge with adjusting the margin-top property through JavaScript. While it works smoothly in Chrome and Safari, Firefox seems to be causing some trouble. Instead of positioning the element above the viewport and gradually bringing it down until it reaches the desired location, Firefox places it way below the target position, then moves it upwards and downwards, resembling the intended animation.
Disabling JavaScript and inputting the value directly into CSS results in the correct positioning, indicating that the problem may lie within the JavaScript code.
Situation Overview: I am endeavoring to craft a basic animated logo using JavaScript. The aim is for the logo to descend from outside the browser window into its designated spot. The logo itself corresponds to the HTML element
<img id="site_logo" src="logo.png" />JavaScript Implementation:
var logoValue = -400;
function onLoad(){
// ...
logoStarter();
}
function logoStarter(){
var site_logo = document.getElementById("site_logo");
site_logo.style.marginTop = logoValue +"px";
logoAnimationDown();
}
function logoAnimationDown(){
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(){
if(logoValue > 0){
console.log(logoValue);
logoValue -= 10;
var site_logo = document.getElementById("site_logo");
site_logo.style.marginTop = logoValue + "px";
setTimeout('logoAnimationUp()', 30);
}
}