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

Dani AI

Generated

The actual problem is that class selectors in DOM methods return collections, not single elements, so you have to target an element (or loop) before using .style. The id version worked because getElementById returns one element. A few concise, safe fixes:

  • If there is only one .item on the page, use querySelector to get a single element:

    var el = document.querySelector('.item');
el.style.opacity = '0';

  • If there can be many, iterate the collection:

    var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
  items[i].style.opacity = '0';
}

  • A cleaner pattern is to toggle a class and let CSS handle the transition (recommended). Example:

    /* CSS */
.item { opacity: 1; transition: opacity 1s ease; }
.item.faded { opacity: 0; }

/* JS */
function toggleFade(el) { el.classList.toggle('faded'); }

    Then call it with the element reference, e.g. onclick="toggleFade(this)". classList and querySelector are simple and modern; polyfills exist if you must support very old browsers.

Also note that -moz-transition alone targets Firefox only — include the standard transition (and any needed vendor prefixes) so other browsers animate correctly. For reference, see the DOM and CSS transition docs at MDN: Document.getElementsByClassName, querySelector/querySelectorAll, and CSS transition.

This keeps things small and avoids pulling in jQuery unless you need its other features, as suggested.

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.