[mx] rollover function - any suggestions?

1

hey,

i have a page with 16 links (all movieclips, instance name rollover1, rollover2 etc).

I am trying to create a function so that when you rollover, that rollover content fades in, and when you rollout it fades out. i have 16 rollover content mcs on the stage names roll1, roll2, etc.

Now the problem i have is when you quickly roll from one button to another. the as is


//set rollover content to alpha = 0 in initially
for (i=0; i<=16; i++) {
	this["roll"+i]._alpha = 0;
}
//fade in specific rollover content on RollOver
function revealRoll(rollNum) {
	this.onEnterFrame = function() {
		if (this["roll"+rollNum]._alpha<100) {
			this["roll"+rollNum]._alpha += 5;
		} else {
			delete this.onEnterFrame;
		}
	};
}
//fade out rollover content on RollOut
function hideRoll(rollNum) {
	this.onEnterFrame = function() {
		if (this["roll"+rollNum]._alpha>=0) {
			this["roll"+rollNum]._alpha -= 100;
		} else {
			delete this.onEnterFrame;
		}
	};
}
//for loop to target all the buttons on the stage
for (i=1; i<=16; i++) {
	this["rollover"+i].i = i;
	this["rollover"+i].onRollOver = function() {
		revealRoll(this.i);
	};
	this["rollover"+i].onRollOut = function() {
		hideRoll(this.i);
	};
}

now it’s kinda obvious to me that the problem is i am calling this.onEnterFrame within the function, therefore if i move to another link quickly, i knock out the function for the previous link.

However i have no clue how to get round this!

any gurus wanna help me figure it out?

all help is greatly appreciated!

cheers,

kd