I'm very new to javascript and web development. I'm looking to implement a fade in / fade out mechanism in a site I'm working on. I don't know how to make it accessible for more browsers. Here's a little test version:

Code HTML4Strict:
<h1 id="myh1" onclick="fadeout();">Click Me</h1>


Code JavaScript:
<script type="text/javascript">
 
var fadeobject = document.getElementById('myh1');
var x=10;
var mytimer="";
 
function fadeout(){ mytimer = window.setInterval("dofade()",50); }
 
function dofade(){
 
	if(x>0){ 
 
	var y=x/10;
 
	fadeobject.style.opacity=y; 
	x-=1; 
 
	}else{ 
	window.clearInterval(mytimer);
 
	fadeobject.style.visibility='hidden';
	}
}
 
 
</script>

This works on my ie (9), ff (8) and chrome (16.0.9...). But I gather that opacity will not work on other/older browsers. Plus I need to cater for those with javascript off.

How can i edit it to fade on other widely used browsers that don't support 'opacity'?

How can i edit it so that the h1 will just disappear if opacity is not supported?

How do i check if opacity is supported?

How do i make it just disappear if javascript isn't on?

I welcome any other comments about the way I've chosen to do the fade.

(if you're wondering why I use the 'y' variable like that, for some reason when I was decrementing x by 0.1 it was coming out with weird values, changing to 0.90000011234 or something rather than just 0.9)

Thx.