Im trying various ways to trigger a transition, the simplest being the use of css pseudoclasses:

//leaving out default header stuff//
<head>
<style>
.item{
opacity:1;
-moz-transition: opacity 1s ease;
}
.item:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" class="item" />
</body>

If i use js to make it trigger onclick instead of hover it works fine:

//leaving out default header stuff//
<head>
<style>
#item{
opacity:1;
-moz-transition: opacity 1s ease;
}
</style>
<script type="text/javascript">
function transition() {
            document.getElementById('item').style.opacity="0";
}
</script>
</head>
<body>
<img src="myimage.jpg" id="item" onclick="transition()" />
</body>

But if i replace the id's with classes, it no longer works:

//leaving out default header stuff//
<head>
<style>
.item{
opacity:1;
-moz-transition: opacity 1s ease;
}
</style>
<script type="text/javascript">
function transition() {
            document.getElementsByClassName('item').style.opacity="0";
}
</script>
</head>
<body>
<img src="myimage.jpg" class="item" onclick="transition()" />
</body>

What am i doing wrong?

this is why I don't even bother with JavaScript.... this is a simple effect that could be achieved by using jQuery. You might want to try that

Seems to be the consensus that jquery is better to use than js. Others have told me i have to loop through the elements and gave me a script to do it, but i can already see it becoming a clusterfuck.

I've tried to use JavaScript a couple of times and end up using jQuery, it's a matter of less writing and easier to do.

Here is what I would do with jQuery:

<a href="#" class="className"><img src="myimage.jpg" class="imageClass" alt="My Image" /></a>
$(function(){
	$('a.className').toggle(function(){
		$('img.imageClass').animate({opacity:0}, 500);
	}, function(){
		$('img.imageClass').animate({opacity:1},500);	
	});

});