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:

Code:
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.

Code:
	<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