Fade in problem

[MrMcCoy]

Hi,

I've got a div with an ID of "textcol". I also have a few buttons that change the content of textcol when they are clicked, this part is working perfectly.

I thought it would look a lot smoother if I had the alpha of textcol fade in each time the content changes.

So basically what I want is when someone clicks one of the buttons, the content changes, the divs alpha goes to 0 then fades in.

I don't want it to fade out, just want it to fade in. Here's the javascript I'm using:

function fadeText(){
	var fade=0,textcol=document.getElementById("textcol").style,ms=(textcol.opacity==0)?0:1,pace=setInterval(Fade,20);
	function Fade(){
		if(fade<100){
			fade+=1;
			if(ms)textcol.filter="alpha(opacity="+fade+")";
			else textcol.opacity=(fade/100)
		}
		else clearInterval(pace)
	}
};

function updateBox(locRef) {
	fadeText();
	changeTitle(locRef);
	swapImage(locRef);
	changeMessage(locRef);
}

And a little bit of the html so you can see how I'm calling the function.

	<div class="mm mm1" id="mm1-1" onclick="updateBox(1)"></div>
	<div class="mm mm1" id="mm1-2" onclick="updateBox(2)"></div>

For some reason this will work once, but when I try and click another button the fade in doesn't happen. However the contents inside the box still update perfectly.

I'm pretty new to JavaScript and would be really grateful for any input you guys have.

TIA
McCoy

[MrMcCoy]

Or if anyone knows a simpler way to fade the div that would be helpful too. If I was coding it in AS2 I would do something like:

textcol._alpha = 0;
textcol.onEnterFrame = function() {
	if(textcol._alpha < 100) {
		textcol._alpha += 10;
	}
	else {
		delete this.onEnterFrame();
	}
}

But I'm pretty new to JavaScript so I don't know how to convert the code.

The simpler the solution the better.

Thanks.

[grumpyOleMan]

Your fadeText function is a bit dodgy but can still work and you confirm it works once. Do you realise that when you call the fadeText function it sets the Fade function to do its stuff every 20ms till done. While that is happening the other functions in updateBox are being called and maybe they do something to interfere with the process. Put it at the bottom of the list in the updateBox function.

To help yourself understand what is going on internally use the browser web development tools to monitor what is going on. As an example what do you expect would be in each of the variables of the fadeText function before you set the fade function in motion? Once you have that list, check the actual values using the tools aforementioned.