Jump to content

slide animation troubles..


astralaaron

Recommended Posts

Hi guys I am just playing around with this trying to make my overlay slide in from the top left into position. It's not working like I thought it would and I cant stop fiddleing around it. It instantly snaps into the position instead of sliding, no matter how much time i change the setTimeout too. But when I turn those alerts on to track the position each time I can see it is moving from position to position...but now that I think about it as soon as you click one alert, the next pops up. It seems like the timeout's aren't working right..

var sliding = 0;var finalY = 110;var finalX = 100;var t;function resetElm(elmId){elem = document.getElementById(elmId);elem.style.top = "-710px";elem.style.left = "-665px";return true;}function initSlide(elmId){if(sliding > 0) return false;sliding = 1;resetElm(elmId);t = setTimeout(runSlide(elmId), 1500);return true;}function runSlide(elmId){var topDone = 0;var leftDone = 0;var elm = document.getElementById(elmId);var current_top = elm.style.top;var current_left = elm.style.left;current_top = parseInt(current_top);current_left = parseInt(current_left);if(current_top < finalY){  var new_top = current_top + 1;  //alert(new_top);  elm.style.top = new_top + "px"; } else topDone = 1;if(current_left < finalX){  var new_left = current_left + 1;  //alert(new_left);  elm.style.left = new_left + "px"; } else leftDone = 1;if((leftDone > 0) && (topDone > 0)){  t = clearTimeout(t);  sliding = 0;  return true;}t = setTimeout(runSlide(elmId), 1500);return true;}

Link to comment
Share on other sites

I ended up changing it around like this and it works if anyone is interested

var sliding = 0;var slideElm;var finalY = 110;var finalX = 100;var t;function resetElm(elmId){slideElm = document.getElementById(elmId);slideElm.style.top = "-510px";slideElm.style.left = "-465px";//alert('set');return true;}function initSlide(elmId){if(sliding > 0) return false;sliding = 1;resetElm(elmId);t = setTimeout('runSlide()', 10);return true;}function runSlide(elmId){var topDone = 0;var leftDone = 0;var current_top = slideElm.style.top;var current_left = slideElm.style.left;current_top = parseInt(current_top);current_left = parseInt(current_left);if(current_top < finalY){  var new_top = current_top + 10;  //alert(new_top);  slideElm.style.top = new_top + "px"; } else topDone = 1;if(current_left < finalX){  var new_left = current_left + 10;  //alert(new_left);  slideElm.style.left = new_left + "px"; } else leftDone = 1;if((leftDone > 0) && (topDone > 0)){  t = clearTimeout(t);  sliding = 0;  return true;}t = setTimeout('runSlide()', 10);return true;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...