Member Avatar for 612wharfavenue

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
  • 82 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by bvelez352

Recommended Answers

All 3 Replies

Member Avatar for bvelez352

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

Member Avatar for 612wharfavenue

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.

Member Avatar for bvelez352

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 because: fixed code
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.