Problem with setTimeout call

Hi,
I'm a Javascript newbie so please have patience.

I'm having a problem with a call of setTimeout(). There is only a problem when I am calling this 1 piece function within it, as I have replaced it with other code to test, and the way I am doing it seems to work ok.

I am basicly trying to fade one UL container in / and (eventually) another one out to display different pics contained within that list. The part I cannot do is fading it in.

I am using the setTimeout to delay the script in order to get a specified duration of the transition. The setTimeout is calling the function it is contained within again with an incremented "count" in order to allow myself 100 steps in the transition.. but I am getting a script error when it runs this setTimeout call.


Here is the problem lines:

var runCmd = "fadeIn(" + fadeElement + ", " + duration + ", " + counter + ")";
	var delay = duration / 100;
	var t = setTimeout(runCmd,delay);

Code (markup):

I will post the full script also, so it is in context

<script type="text/javascript">
<!--
function getStyle(oElm, strCssRule){
	var strValue = "";
	if(document.defaultView && document.defaultView.getComputedStyle){
		strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
	}
	else if(oElm.currentStyle){
		strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
			return p1.toUpperCase();
		});
		strValue = oElm.currentStyle[strCssRule];
	}
	return strValue;
}



function fadeIn(fadeElement, duration, counter) {
if (counter < 100) {
var useElement = document.getElementById(fadeElement);
    useElement.style.opacity=(counter / 100);
	useElement.style.MozOpacity=(counter / 100);
	useElement.style.KhtmlOpacity=(counter / 100);
	useElement.style.filter="alpha(opacity=" + counter + ")";
	counter++;
	var runCmd = "fadeIn(" + fadeElement + ", " + duration + ", " + counter + ")";
	var delay = duration / 100;
	var t = setTimeout(runCmd,delay);
	}
	else {
	 window.alert("Finished Fading");  <!-- Debugging -->
	  }
}


function displayChange(obj) {
var displayID = obj.id;
var firstLink = displayID + "link1";
var displayUL = displayID + "ul";
var ulList    = document.getElementById('tabsUL').getElementsByTagName("ul");

for (var i=0;i<ulList.length;i++) {
  var x = document.getElementById(ulList[i].id);
  style = getStyle(x, "display");
  if (style == "block") {
  ulList[i].style.display="none";
  }
  }
  document.getElementById(displayUL).style.display="block";
document.getElementById(firstLink).focus();
  fadeIn(displayUL, 2000, 0);
}
-->
</script>

Code (markup):

Thankyou in advance for ANY help anyone can offer on this because it is really doing my head in

 

var runCmd = "fadeIn(" + fadeElement + ", " + duration + ", " + counter + ")";
var t = setTimeout(runCmd,delay);

1. the function passed to setTimeout cannot pass arguments at the same time. You pass the name of the function to call

var globalVariable1 = 30;
var globalVariable2 = document.getElementById('someImage');
function fadeIn() {
//do something
globalVariable2.style.MozOpacity = globalVariable1;
globalVariable1 -= 10;
setTimeout('fadeIn', 1000)
}