0

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?

2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by bvelez352
0

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

0

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.

0

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);	
	});

});

Edited by bvelez352: fixed code

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.